D3自定義顏色在一個單一的數據系列

我目前正在通過一些客戶端的圖表，並發現很難自定義顏色完全如何我想要的。我在React中使用D3並使用rumble-charts npm模塊。D3自定義顏色在一個單一的數據系列

下面是數據的粗略例如：

const series = [{ data: [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }];

這裏是我如何可能使該數據

<Chart width={300} height={150} series={series} minY={0}> 
    <Layer width='80%' height='90%' position='top center'> 
    <Bars 
     groupPadding='3%' 
     innerPadding='0.5%' 
     colors={[['red', 'red', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue']]} 
    /> 
    </Layer> 
</Chart>

從本質上說，我只是想有負值的原油例子以紅色顯示，正值以藍色顯示。看起來對我來說很簡單，但是當一個人定義了多種顏色時，他們被用於系列'而不是單個值。

來源

2016-06-17 Mitch

基於CSS的解決方案對你有好處嗎？ –

@GerardoFurtado如果我能夠可靠地瞄準負值，那麼我可以忍受它。 – Mitch

分享你的D3代碼。爲顏色傳遞一個函數是很容易的... –

在基於CSS的解決方案，根據自己的類先設置CSS着色酒吧：

.positiveBar { 
    fill: blue; 
} 

.negativeBar { 
    fill: red; 
}

後，根據它的值設置類的吧：

.attr("class", function(d) { 
    return (d > 0) ? "positiveBar" : "negativeBar"; 
})

來源

2016-06-18 03:58:11

D3自定義顏色在一個單一的數據系列

回答

相關問題