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

【问题标题】：Items missing from d3 map visualizationd3 地图可视化中缺少的项目
【发布时间】：2017-02-02 23:22:05
【问题描述】：

我正在尝试重现 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 有很大的不同。

【问题讨论】：

标签： d3.js

【解决方案1】：

这就是问题所在：

在您的 CSV 中，有些州的 ID 只有 1 位数字。

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 不匹配，路径 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/

【讨论】：

这是更好的答案，通过解决方案确定确切原因，而我的解决方案仅显示问题出现的位置。如果我能获得体育精神徽章，那可能完全是因为你 Gerardo，你是两个对两个，我认为到目前为止我们都回答了（还有一段路要走）
@AndrewReid 你的答案（刚刚投了赞成票）也有它的价值，向 OP 展示了如何在使用它之前验证一个值。
效果很好，谢谢！为了绕过整个 0 填充问题，有没有办法在读取地图和 csv 时将 id 转换为整数？或者javascript不能强制这样的类型吗？
@M_Corn 是的，当然，这是修复它的另一种方法，请检查我的编辑。可以用一个 + 号来完成。

【解决方案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

【讨论】：