使用d3.tsv复制D3.js中的chropleth

Question

我尝试使用墨西哥城市的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

非常感谢任何帮助

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"