javascript - 使用 d3.tsv 在 D3.js 中复制 chropleth

Question

我正在尝试复制 Mike Bostock's chropleth使用墨西哥城市的 topojson 文件并使用 .tsv 对其进行着色，该 .tsv 的 id 值与多边形相匹配。

到目前为止，我已经能够显示 map 及其多边形，但我无法根据 .tsv 文件中的值对其进行实际着色。

我怀疑问题出在这个函数中，因为我不完全确定它在函数内调用 .tsv 的位置

    queue()
    .defer(d3.json, "mx5.topojson")
    .defer(d3.tsv, "Cosecha.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

function ready(error, mx5) {
  svg.append("g")
      .attr("class", "mx4")
    .selectAll("path")
      .data(topojson.feature(mx5, mx5.objects.mx4).features)
    .enter().append("path")
      .attr("class", function(d) { return quantize(rateById.get(d.id)); })
      .attr("d", path);

 svg.append("path")
      .datum(topojson.mesh(mx5, mx5.objects.Estados, function(a, b) { return a !== b; }))
      .attr("class", "Estados")
      .attr("d", path);

}

这是我的 gist 的链接这是我的 topojson mexican municipalities

任何帮助将不胜感激

Answer 1

您的代码期望通过属性id对县进行索引，例如rateById.set(d.id, +d.rate).

但是，您的 tsv 称它们为“Mun”，如下所示

"Mun"   "rate"
"01001" 350058.5
"01002" 224305
"01003" 132115

因此将 d.id 更改为 d.Mun(在 2 个位置)，或重命名 “Mun”