Javascript 尝试在印度地图上应用choropleth

我正试图在印度地图上画一幅彩画。但未能达到以下效果——

我能感觉到上面和下面的代码是原因，但我无法解决它

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

---

颜色参考取自

的位置。您没有正确地将数据传递到分位数刻度。然后尝试在

india

变量（即svg）上设置颜色，而不是路径：

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

---

---

正在运行的代码已更新。

您没有正确地将数据传递到分位数刻度。然后尝试在

india

变量（即svg）上设置颜色，而不是路径：

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

---

---

正在运行的代码已更新。

除了中解释的问题外，您的色阶是错误的。现在，它将此数组作为域返回：

[0, 8, 9765]

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

这可能不是你想要的

这是一个不同的尺度，将域以相等的间隔从0划分到最大

总数
：

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

现在，这是域：

[0, 8, 9765]

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

这是更新后的plunker:
除了中解释的问题之外，您的色阶是错误的。现在，它将此数组作为域返回：

[0, 8, 9765]

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

这可能不是你想要的

这是一个不同的尺度，将域以相等的间隔从0划分到最大
总数
：

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

现在，这是域：

[0, 8, 9765]

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

这里是更新后的plunker:
我会把图片放在人们通常不喜欢尝试的外部网站的链接上，最终fiddlesI会把图片放在人们通常不喜欢尝试的外部网站的链接上，最终fiddleshey，我试图在图表中添加图例，但发现范围有问题。0和1085之间的差距太大，以至于应该存在的第一种颜色被“y=0”和“height=0”隐藏。参考更新的plunker-您的问题不清楚。。。我建议你将此作为一个新问题发布，并提供相关详细信息。不过，我在为地图添加图例时出现了一些错误。现在明白了。谢谢你的回答！！别担心。。。不管怎样，请随意发布一个新问题。嘿，我试图在图表中添加图例，但发现范围有问题。0和1085之间的差距太大，以至于应该存在的第一种颜色被“y=0”和“height=0”隐藏。参考更新的plunker-您的问题不清楚。。。我建议你将此作为一个新问题发布，并提供相关详细信息。不过，我在为地图添加图例时出现了一些错误。现在明白了。谢谢你的回答！！别担心。。。不管怎样，请随时发布新问题。