Question

大家好我在多边形中使用d3图表地理图形地图它的工作很好现在我的需要是我需要显示基于图例的颜色当我的传奇颜色时，颜色poylgon只突出显示其他应该淡出注意：颜色是线性的颜色来自于我附加小提琴的价值

 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/

如何在d3多边形图表

1 个答案: