如何使可点击图例在D3多边形图中可见 [英] How to make clickable legend visible in d3 polygon chart

问题描述

所有我在多边形中使用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;
    });

更新的提琴:- https://jsfiddle.net/gilsha/w4urapds/

按图片过滤: https://jsfiddle.net/gilsha/sabn5m0w/1/

hi all i am using d3 chart geo graphic map in polygon it's work's fine now my need is i need to show legend based color when i legend color that color poylgon only highlighting others should be in fade out NOTE:Color's are in linear color comes based on values here i attached my fiddle

 jsfiddle.net/k91x6vs3/

解决方案

Calculate the unique color set as shown below.

  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

Code to create legends using the unique color set -

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

Updated fiddle: - https://jsfiddle.net/gilsha/w4urapds/

Filter by image: https://jsfiddle.net/gilsha/sabn5m0w/1/

这篇关于如何使可点击图例在D3多边形图中可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！