使用 d3.tsv 在 D3.js 中复制 chropleth答案

【问题标题】：Replicating a chropleth in D3.js using d3.tsv使用 d3.tsv 在 D3.js 中复制 chropleth
【发布时间】：2014-12-06 00:26:25
【问题描述】：

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

到目前为止，我已经能够显示地图及其多边形，但我无法根据 .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 的链接，这里是我的mexican municipalities topojson 的链接

任何帮助将不胜感激

【问题讨论】：

标签： javascript d3.js gdal topojson

【解决方案1】：

您的代码期望县被 prop id 索引，例如rateById.set(d.id, +d.rate).

但是，您的 tsv 将它们称为 "Mun"，如

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

因此将d.id 更改为d.Mun（在2 个位置），或重命名"Mun"

【讨论】：

谢谢！现在就像一个魅力。