javascript - D3 : scale and color for choropleth map

Question

我正在制作 D3 map ，作为涉及小区域统计的项目的几个原型(prototype)之一。我从一个简单的 map 开始，我是 D3 的新手。

我无法使用阈值或分位数显示一系列颜色。我已经编写了至少 6 个示例来试验许多其他已经存在的示例，但我无法在区域中显示范围。我知道我很接近，但我缺少一些东西。

我的例子在 git 上 https://github.com/Monduiz/OL-explorer .我真的很感激任何能帮助我理解我做错了什么的见解。

这是我正在使用的代码，文件可在上面的链接中找到。

var width = 960,
    height = 500;

var colors = d3.scale.quantize()
    .domain([0, 1])
    .range(colorbrewer.YlOrRd[7]);

var projection = d3.geo.azimuthalEqualArea()
    .rotate([100, -45])
    .center([5, 20])
    .scale(800)
    .translate([width/2, height/2])

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "OLMCSDfr.json")
    .defer(d3.csv, "data.csv")
    .await(ready);

function ready(error, can, OLM) {
  var PopById = {};

OLM.forEach(function(d) { PopById[d.Id] = +d.OLMnb; });

  svg.append("g")
    .attr("class", "SDR")
    .selectAll("path")
    .data(topojson.feature(can, can.objects.OLMCSDfr).features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", function(d) { return colors(PopById[d.Id]); });
  }

Answer 1

在您的 ready 函数中，您正在为每个当前未定义的 topojson 功能引用 d.Id。

我将传递给 fill 的函数切换为获取 d.properties.SDRID，这在 topojson 功能和您的 OLM 中都有列表元素。 forEach 语句也必须更改以匹配。

这似乎可行:

function ready(error, can, OLM) {
  var PopById = {};

  OLM.forEach(function(d) { PopById[d.SDRID] = +d.OLMnb; });

  svg.append("g")
      .attr("class", "SDR")
    .selectAll("path")
      .data(topojson.feature(can, can.objects.OLMCSDfr).features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { 
        return colors(PopById[d.properties.SDRID]); });

}