Question

我正在尝试在印度地图图表上应用一个等值线。但无法实现结果 - My demo

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

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

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

颜色参考取自bl.ocks.org/tjdecke/5558084

Answer 1

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

[0, 8, 9765]

这可能不是你想要的。

这是一个不同的比例，将域以相等的间隔从0分割到最大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);

现在，这是域名：

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

这是更新的plunker：http://plnkr.co/edit/CWn1vKbzDLq1YDAu9oD7?p=preview

Answer 2

您没有正确地将数据传递到分位数刻度。然后你尝试设置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);
  });

运行代码已更新here。

试图在印度地图上应用等值线

2 个答案: