SVG使用黑色填充，而不是映射颜色

I have a plot with many svg rects in my block. Most I were able to plot and fill just fine, however the initial rect is not blue like it is in my color map:

在我的块中有许多svg矩形。我能绘制和填充的大部分都很好，但是初始矩形不是蓝色的，就像它在我的彩色地图里一样:

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

console.log() shows that the correct integer is being passed, and the correct color is being associated by the object. The other columns in my csv are floats, but the values for my color map are integers. The column has the header of id and takes on 1 of 3 values: 0,1 or 2.

log()显示正在传递正确的整数，并且对象正在关联正确的颜色。csv中的其他列是浮点数，但颜色映射的值是整数。该列具有id的头部，具有3个值中的1个:0、1或2。

I have read that this error can occur when the number is a float, not an integer. But to my knowledge, they are all integers. And even if my 0 entry is not an integer (for whatever reason) then why are all the other entries in that column working just fine? That would be very counter intuitive to have D3 recognize some numbers as floats and others as integers within the same exact column.

我已经读过，当数字是浮点数时，这个错误会发生，而不是一个整数。但据我所知，它们都是整数。即使我的0项不是整数(不管出于什么原因)那么为什么列中的其他项都能正常工作呢?让D3识别一些数字作为浮点数，另一些数字作为整数在同一列中，这将是非常违背直觉的。

Perhaps it's not about integers/floats at all, could I be overlooking something else?

也许这不是整数/浮点数，我可以忽略其他东西吗?

1 个解决方案

#1

In JavaScript (as well as all languages I'm aware of) 0 is falsy, that is, it evaluates to false. The falsy values are:

在JavaScript(以及我所知道的所有语言)中，0是假的，也就是说，它的值为false。falsy值:

false
假
null
零
undefined
未定义的
0
0
NaN
南
"" (empty string)
" "(空字符串)

That being said, this:

也就是说,这个:

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

... will evaluate to false when colorID is zero, and therefore it will avoid you to use the colorMap when d.id is zero.

…将在色度为0时求值为false，因此在d时避免使用颜色图。id是零。

Solution: just drop it:

解决方案:把它:

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

Or, alternatively, if your intention is just to check if the property exists:

或者，如果您的目的只是检查该财产是否存在:

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

Here is your updated bl.ocks: http://bl.ocks.org/anonymous/932089f945d5930ef8e7d8060b0d0bfe

更新后的bl.ocks: http://bl.ocks.org/ous/932089f945d5930ef8e7d80b0b0bfe

#1