D3.jsのホバリングでjsonデータをフィルタリングして一致させる

Question

D3.jsマップ上の一致する村を誰が所有しているのかを強調するインタラクティブな凡例を作成しようとしています。ただし、強調表示は機能しません。 JSONファイルを変更して、村が1人の所有者であることを示すようにしても、ほとんどの村は複数の人が所有しています。これをどうすれば解決できますか？私はJSONで何かする必要がありますか？次のように

インタラクティブ伝説コードが行く：

//Decrease opacity of non selected circles when hovering in the legend 
function selectLegend(opacity) { 
    return function(d, i) { 
    var chosen = color.domain()[i]; 
    d3.selectAll(".villages") 
     .filter(function(d) { return d.landholder != chosen; }) 
     .transition() 
     .style("opacity", opacity); 
    }; 
};//function selectLegend 

JSONは以下のようになります。chosenを想定し

[ 
    { 
    "longitude": 55.4, 
    "latitude": 55.4, 
    "name": "village1", 
    "landholder": ["Landholder1", "Landholder2", "Landholder3"] 
    } 
] 

Answer 1

は、唯一の地主の名前が含まれています

d.landholderが配列である場合d.landholder == chosenを使用すると動作しません。値が配列と等しい場合ではなく、値が配列内にあるかどうかを確認する必要があります。

.filter(function(d) { return d.landholder.indexOf(chosen) > -1; }) 

array.indexOf(value)所与の配列内の値のインデックスを返します。

のようなラインが試してみてください。負の値は、値が存在しないことを示します。したがって、あなたのコードでは、d.landholder.indexOf(chosen)がゼロ以上の数を返す場合、選択した値が土地所有者配列内にあるかどうかを見ることができます。これが機能するために

することは、あなたのJSON内のすべてのあなたの地主の値は、彼らが彼らの唯一つの値を持っている場合でも、配列でなければなりません：

"landholder": ["Landholder1"], 

以下の例は、この使用して、データ要素の単純な実装であります私はその行をしようとすると、私は次の取得

var data = [ 
 
{ groups: ["a","b","c"] }, 
 
{ groups: ["b"] }, 
 
{ groups: ["a","c","d"] }, 
 
{ groups: ["a","d"] }, 
 
{ groups: ["a","b"] } 
 
] 
 

 

 
var text = d3.select("body") 
 
    .append("div") 
 
    .selectAll("p") 
 
    .data(["a","b","c","d"]) 
 
    .enter() 
 
    .append("p") 
 
    .html(function(d) { return "Group: " + d }) 
 
    .on("mouseover",function(chosen) { 
 
    // reset all circles: 
 
    d3.selectAll("circle").attr("fill","steelblue"); 
 
    // select all circles and filter if groups array has chosen value: 
 
    d3.selectAll("circle").filter(function(d) { 
 
     return d.groups.indexOf(chosen) > -1 
 
     }) 
 
     .attr("fill", "red") 
 
    
 
    }) 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width",500) 
 
    .attr("height",200); 
 
    
 
var circles = svg.selectAll("circle") 
 
    .data(data) 
 
    .enter() 
 
    .append("circle") 
 
    .attr("cx",function(d,i) { return i * 100 + 50 }) 
 
    .attr("cy", 100) 
 
    .attr("r",20) 
 
    .attr("fill","steelblue");

p { 
 
    margin: 5px; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    background: #ccc; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>