试图在印度地图上应用choropleth

Question

I am trying to apply a choropleth on the Indian map Chart. But not able to achieve the result - My demo

      var colorScale = d3.scale.quantile()
          .domain([0, buckets - 1, d3.max(json, function (d) { return json.total; })])
          .range(colors);

I can sense that the above and below codes are the cause but am unable resolve it.

            india.transition().duration(1000)
          .style("fill", function(d) { return colorScale(json.total); });

the colors ref where taken from bl.ocks.org/tjdecke/5558084

Answer 1

Besides the issues explained in the other answer , your color scale is wrong. Right now it returns this array as the domain:

[0, 8, 9765]

Which is probably not what you want.

Here is a different scale, dividing the domain in equal intervals from 0 to the maximum total :

var maxTotal = d3.max(json.features, function(d) {
    return d.total
});

var colorScale = d3.scale.quantile()
    .domain(d3.range(buckets).map(function(d) {
        return (d / buckets) * maxTotal
    }))
    .range(colors);

Now, this is the domain:

[0, 1085, 2170, 3255, 4340, 5425, 6510, 7595, 8680]

And here is the updated plunker: http://plnkr.co/edit/CWn1vKbzDLq1YDAu9oD7?p=preview

Answer 2

You aren't passing the data to the quantile scale correctly. And then you try to set the colors on your india variable (which is the svg) and not the paths:

  // pass json.features to d3.max, convert total to number
  var colorScale = d3.scale.quantile()
        .domain([0, buckets - 1, d3.max(json.features, function (d) { return +d.total; })])
        .range(colors);

  ...

  // continue chaining off path creation
  // pass total to colorScale and convert to number
  .transition().duration(1000)
  .style("fill", function(d) { 
      return colorScale(+d.total);
  });

---

Running code updated here .