SVG具有填充黑色而不是映射颜色

Question

我有我的许多SVG rects情节块.大多数我能够绘制并填充得很好,但是初始矩形不像我在彩色地图中那样是蓝色的:

var colorMap = {
  0: "blue",
  1: "red",
  2: "yellow",
};

console.log()表示正在传递正确的整数,并且该对象正在关联正确的颜色.我的csv中的其他列是浮点数,但我的颜色映射的值是整数.该列具有标题,id并取3个值中的1个:0,1或2.

我已经读过,当数字是浮点数而不是整数时,可能会发生此错误.但据我所知,它们都是整数.即使我的0条目不是整数(无论出于何种原因),为什么该列中的所有其他条目都能正常工作？如果让D3将某些数字识别为浮点数而将其他数字识别为同一列中的整数,那将是非常直观的.

也许它根本不是关于整数/浮点数,我可以忽略其他东西吗？

Answer 1

在JavaScript中(以及我所知道的所有语言)0都是假的,也就是说,它的评估结果是false.该falsy值是:

• false
• null
• undefined
• 0
• NaN
• ""(空字符串)

话虽这么说,这个:

.style('fill', function(d) {
    var colorID = d.id;
    if (colorID) {
        return colorMap[colorID];
    }
});

......将评估到false的时候colorID是零,因此将避免你使用colorMap的时候d.id是零.

解决方案:放下它:

.style('fill', function(d) {
    return colorMap[d.id];
});

或者,或者,如果您的目的只是检查属性是否存在:

.style('fill', function(d) {
    var colorID = d.id;
    if (colorID != undefined) {
        return colorMap[colorID];
    }
});

这是您更新的bl.ocks:http://bl.ocks.org/anonymous/932089f945d5930ef8e7d8060b0d0bfe