SVGにマップされた色の代わりに黒の塗りがあります

Question

私はblockに多くのsvg rectがあるプロットを持っています。

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

console.log()

が正しい整数が渡されていることを示しており、正しい色が関連している：それは私のカラーマップにあるように、ほとんどが、私はちょうど罰金をプロットし、埋めることができました、しかし初期RECTは青ではありませんオブジェクトによって。私のCSVの他の列は浮動小数ですが、私のカラーマップの値は整数です。列には idというヘッダーがあり、3つの値のうちの1つ、つまり0,1、または2をとります。

このエラーは、数値が整数ではなく浮動小数点数である場合に発生することがあります。しかし私が知っている限り、それらはすべて整数です。そして、たとえ私の0エントリが（何らかの理由で）整数でないとしても、なぜそのカラムの他のすべてのエントリも正常に動作していますか？これは、D3がいくつかの数値を浮動小数点として認識し、他の数値を同じ正確な列内の整数として認識させることは非常に直観的です。

おそらく、整数/浮動小数点数に関するものではありません。別のものを見落とすことはできますか？

Answer 1

0は偽である、つまりfalseと評価されています。 falsy valuesは、次のとおり

• false
• null
• undefined
• NaN
• ""（空文字列）

言われているので、この：

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

... colorIDがゼロのときfalseに評価されますので、それはd.idがゼロのときにcolorMapを使用することを避けることができます。

ソリューション：ちょうどそれをドロップします。

.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