D3.js 如何使可点击图例在d3多边形图表中可见

大家好，我正在多边形中使用d3图表地理图形地图，工作正常，现在我需要显示基于图例的颜色，当我使用图例颜色时，仅突出显示其他颜色的多边形应处于淡出状态注：颜色为线性颜色，以值为基础我在此附上我的小提琴

 jsfiddle.net/k91x6vs3/

---

计算唯一颜色集，如下所示

  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;
    });

更新小提琴：-

---

按图像过滤：

计算唯一颜色集，如下所示

  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;
    });

更新小提琴：-

---

按图像筛选：

非常感谢@Gilsha@Gilsha你能加入吗？非常感谢@Gilsha@Gilsha你能加入吗