Question

我试图重建M. Bostock着名的Choropleth example，但是要按国家而不是按县着色。我有它主要工作，但由于某种原因，前几个状态不渲染。从研究其他问题开始，我认为它可能是selectAll issue或d3如何解析索引的问题，但我似乎无法理解它。

以下是我进入并呈现状态的具体功能：

function testMap(error, us){
    if(error) throw error;
    svg.append("g")
      .attr("class", "states")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("fill", function(d) { return color(d.value = num.get(d.id)); })
      .attr("d", path)
    .append("title")
      .text(function(d) { return state.get(d.id) + ", " + d.value; });

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

Here's a working JSFiddle with my issue

PS：我应该注意，我试图在这个例子中使用d3 v4，我学到的是与v3完全不同。

Answer 1

这是问题所在：

在您的CSV中，您的某些状态只有1位ID。

state       abrev   id  value
Alabama     AL      1   0.113771056
Alaska      AK      2   0.634948665
Arizona     AZ      4   0.022697068
Arkansas    AR      5   0.762050795
California  CA      6   0.99979688
Colorado    CO      8   0.606026214
Connecticut CT      9   0.165650662
Delaware    DE      10  0.950772614
//from Delaware on, all IDs have 2 digits

那些正是有问题的状态，因为num.set(d.id, d.value)不匹配路径的ID，它们有2位数字（01,02,04,05等......）。

解决方案：为这些ID添加零：

.defer(d3.csv, "https://dl.dropboxusercontent.com/u/2465343/test.csv",
        function(d) {
            if (d.id.length == 1) {
                d.id = "0" + d.id;
            }
            num.set(d.id, d.value);
            state.set(d.id, d.state)
        })
    .await(testMap);

现在您拥有正确的ID，就好像这是您的CSV：

state       abrev   id  value
Alabama     AL      01   0.113771056
Alaska      AK      02   0.634948665
Arizona     AZ      04   0.022697068
Arkansas    AR      05   0.762050795
California  CA      06   0.99979688
Colorado    CO      08   0.606026214
Connecticut CT      09   0.165650662
Delaware    DE      10  0.950772614
//...

这是更新的小提琴：https://jsfiddle.net/r95e113L/

当然，您可以在没有任何代码的情况下解决此问题，只需在任何文本编辑器中打开CSV并手动为这些ID添加零。

另一个更短的修复：将ID从字符串转换为整数：

.attr("fill", function(d) { 
    return color(d.value = num.get(+d.id)); 
})

以下是相应的小提琴：https://jsfiddle.net/entraop9/

Answer 2

我有个好消息，问题不在于你如何追加地图功能。如果我改变了这个：

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

为：

.attr("fill","steelblue")

我可以看到一切：https://jsfiddle.net/h6b2bjrt/

如果我将该行更改为：

attr("fill", function(d) { console.log(num.get(d.id)); return color(d.value = num.get(d.id)); })

我可以看到七个特征没有定义在他们需要的位置，这可能是你的绘图。如果我将其替换为：

.attr("fill", function(d) { if(num.get(d.id) == undefined) { return color(d.value = 0); } else { return color(d.value = num.get(d.id)); } })

用零替换未定义的值I see all the states

d3地图可视化中缺少的项目

2 个答案: