麻烦建立在Bostock d3等值线.tsv例子

Question

我对迈克博斯托克的失业率（https://bl.ocks.org/mbostock/4060606）的一个小调整感到困惑：将县名和州缩写添加到.tsv文件中。

我通过将Bostock的原始版本与人口普查局的县ID代码，名称和州列表合并，创建了一个新的失业.tsv。一个样品：

id    rate    state    county
01001    5.1    AL    Autauga County
01003    4.9    AL    Baldwin County
...
56043    4.5    WY    Washakie County
56045    4.9    WY    Weston County

在javascript中，我修改了d3.queue（）块，如下所示，试图访问州和县列：

d3.queue()
.defer(d3.json, "https://d3js.org/us-10m.v1.json")
.defer(d3.tsv, "unemployment2.tsv", function(d) {
    unemployment.set(d.id, +d.rate, d.county, d.state);
    county = d.county;
    state = d.state;
     })
.await(ready);

然后，我修改了svg.append块的工具提示行，如下所示：

.text(function(d) { return d.id + " - " + county + ", " + state + " - " + d.rate + "%"; });

生成的映射可以访问.tsv文件中的新列，但无论您将鼠标悬停在哪个县，工具提示都只显示最后一行（Weston County，WY）的县和州。 （奇怪的是，id和rate字段确实反映了工具提示中的正确县。）

我在服务器上看到与Plunker（https://plnkr.co/edit/vrm4FuBVEQc7lCSnbytl?p=preview）相同的行为。

欣赏关于我做错了什么/如何解决的任何见解。

Answer 1

要做到这一点，你需要了解d3.map()如何工作。 d3映射创建键条目对，map.get("key")返回与该键相关联的值。要在地图中创建条目，我们使用map.set("key",value)。在您的代码块中，您使用：

unemployment.set(d.id, +d.rate, d.county, d.state);

unemployment是你的地图，而d是tsv中的一排。使用这个，我们将与每个键（d.id）相关联的值设置为d.rate，这只是原始示例中我们想要的数据的一部分。这里的额外参数d.county和d.state将被忽略。

相反，我们可以使用：

unemployment.set(d.id, d);

如上所述，这将把关键设置为d.id，但现在该值是我们想要的tsv的整行：

unemployment.get("06071"); // { id: "06071", rate: "6.2", state: "CA", county: "San Bernardino County" }

在原始示例中，map中的值是一个字符串，但现在它是一个表示tsv中的行的对象，因此我们需要在原始示例中解决几行：

.attr("fill", function(d) { return color(unemployment.get(d.id)); })

变为：

.attr("fill", function(d) { return color(unemployment.get(d.id).rate); })

因为我们需要访问映射值的rate属性。

对于工具提示，我们可以使用：

 .text(function(d) { var datum = unemployment.get(d.id); return "ID: " + datum.id + " - " + datum.county + ", " + datum.state + " - " + "Rate: " + datum.rate + "%"; });

这给了我们this。