在 Bostock d3 choropleth .tsv 示例上构建时遇到问题

Question

我被我希望对 Mike Bostock 的失业率统计表 (https://bl.ocks.org/mbostock/4060606) 进行的细微调整所困扰：将县名和州缩写添加到 .tsv 文件中。

我创建了一个新的 unemployment2.tsv，方法是将 Bostock 的原件与人口普查局的县 ID 代码、名称和州列表合并。样本：

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 文件中的新列，但工具提示显示县和州仅来自最后一行（怀俄明州韦斯顿县）您将鼠标悬停在哪个县。（奇怪的是，id 和 rate 字段 do 在工具提示中反映了正确的县。）

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

感谢任何关于我正在做的wrong/how修复的见解。

Answer 1

为此，您需要了解 d3.map() 的工作原理。 d3 映射创建键条目对，map.get("key") returns 与该键关联的值。要在地图中创建一个条目，我们使用 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" }

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

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

变为：

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

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

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

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

这给了我们 this.

在 Bostock d3 choropleth .tsv 示例上构建时遇到问题

Trouble building on Bostock d3 choropleth .tsv example

javascript

csv

d3.js

topojson

choropleth