D3 v4を使用してbeeswarmのリストタグへのインタラクティブ性

Question

D3を使用してグラフにインタラクティブ機能を追加しようとしましたが、HTMLのリストタグに基づいています。

好きなものは、人々が（ブラジル、アメリカ、アフリカなど）リストアイテムを表示するときに、opacity: 1;またはfadeエフェクトのような、強調表示するドットに、名前をつけたときに大陸のドットを強調するものです。私はバインドする方法をそれを把握していない

cell.append("circle") 
    .attr("r", 4) 
    .attr("cx", function(d) { return d.data.x; }) 
    .attr("cy", function(d) { return d.data.y; }) 
    .attr("fill",function(d) { if(d.data.id === "Brasil")return "#000";  
    if(d.data.region === "África")return "rgba(255, 224, 102, 0.4)"; 
    if(d.data.region === "Americas")return "rgba(112, 193, 179, 0.4)"; 
    if(d.data.region === "Europa")return "rgba(36, 123, 160, 0.4)"; 
    if(d.data.region === "Ásia")return "rgba(250, 166, 26, .4)";if(d.data.region === "Oceânia")return "rgba(141, 153, 174, 0.4)"}) 
    ; 

    d3.selectAll(".legenda") 
.on("mouseover", function (d) { 
d3.select (d.region) 
.style("opacity", 1); 
}) 
.on("mouseout", function (d) { 
d3.selectAll(".legenda") 
.style("opacity", .4); 
}); 

：

Here is the code

は、私はもっと簡単なグラフの、過去の私のために働いている下記の短い抜粋、にバリエーションを試してみましたこの場合のデータあなたが書く

Answer 1

：

d3.select(d.region); 

あなたは（あなたは、いくつかの円を選択している場合selectはちょうどそれが見つかった非常に最初の要素を選択するので、それは、selectAllする必要があり、それ以外の）任意の円を選択されていません。

しかし、良いニュースは、あなたが望むことを行うためのいくつかの方法があるということです。その後

cell.append("circle") 
    .attr("class", function(d){ return d.data.region}) 

、あなたはそのクラスに属するすべての円を選択して、混濁あなたが望む方法で適用することができます：

をあなたは円を作成するときにそれらの一つは、大陸に応じてクラスを適用しています

d3.selectAll(".legendas") 
    .on("mouseover", function (d) { 
    var thisContinent = this.id; 
    d3.selectAll("circle").attr("opacity", 0); 
    d3.selectAll("." + thisContinent).attr("opacity", 1); 
}).on("mouseout", function(){ 
    d3.selectAll("circle").attr("opacity", 1); 
}); 

liタグのクラスを「legendas」に変更しました（liの場合は1回、ulの場合は1回）。これは素晴らしいですhttp://codepen.io/anon/pen/regYyw