CODEWITHSUNDEEP
d3.js
jose
jose

Reputation: 1054

How to make clickable legend visible in d3 polygon chart

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/

Upvotes: 0

Views: 348

Answers (1)

Gilsha
Gilsha

Reputation: 14591

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/

Upvotes: 2

Related Questions