クリック可能な凡例をd3ポリゴンチャートで表示するには

Question

こんにちはすべて私は多角形でd3チャートジオグラフィックマップを使用していますが、今は私の必要性は伝説の色を表示する必要があります。フェードアウトNOTEであること：カラーのリニアカラーである値に基づいていますここで私は

jsfiddle.net/k91x6vs3/ 

Answer 1

は、以下のように設定され独特の色を計算し、私のバイオリンを取り付けました。独自のカラーセットを使用しての伝説を作成する

var props = json.features.map(function(d) { 
    return d.properties.pop ? color(d.properties.pop) : undefined 
    }).filter(function(d) { 
    return d != undefined 
    }); 

    props = Array.from(new Set(props)); //To find unique 

コード -

var legend = d3.select("body").append("svg") 
    .attr("class", "legend") 
    .attr("width", 140) 
    .attr("height", 200) 
    .selectAll("g") 
    .data(props) 
    .enter() 
    .append("g") 
    .attr("transform", function(d, i) { 
     return "translate(0," + i * 20 + ")"; 
    }) 
    .on("click", function(d, i) { 
     paths.style("opacity", "1"); 
     if (d3.select(this).attr("checked")) { 
     d3.select(this).attr("checked", undefined); 
     } else { 
     d3.select(this).attr("checked", true); 
     paths.each(function(p) { 
      if (d == color(p.properties.pop)) { 
      d3.select(this).style("opacity", "1"); 
      } else { 
      d3.select(this).style("opacity", "0.2"); 
      } 
     }); 
     } 
    }); 

    legend.append("rect") 
    .attr("width", 18) 
    .attr("height", 18) 
    .style("fill", function(d) { 
     return d 
    }); 

    legend.append("text") 
    .attr("x", 24) 
    .attr("y", 9) 
    .attr("dy", ".35em") 
    .text(function(d, i) { 
     return i; 
    }); 

更新フィドル： - イメージによってhttps://jsfiddle.net/gilsha/w4urapds/

フィルタ：https://jsfiddle.net/gilsha/sabn5m0w/1/