单个数据系列中的 D3 自定义颜色答案

【问题标题】：D3 custom colors inside a single series of data单个数据系列中的 D3 自定义颜色
【发布时间】：2016-06-17 02:30:53
【问题描述】：

我目前正在为客户制作一些图表，发现很难完全按照我的意愿自定义颜色。我在 React 中使用 D3 并使用 rumble-charts npm 模块。

这是数据的粗略示例：

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>

本质上，我只想让负值显示为红色，正值显示为蓝色。对我来说似乎很简单，但是当定义多种颜色时，它们用于系列而不是单个值。

【问题讨论】：

基于 CSS 的解决方案对您有好处吗？
@GerardoFurtado 如果我能可靠地定位负值，我可以忍受它。
分享您的 D3 代码。为颜色传递函数很容易......
@CoolBlue D3 代码包含在 rumble-charts npm 模块中

标签： javascript d3.js reactjs

【解决方案1】：

在基于 CSS 的解决方案中，首先根据它们的类设置用于着色条的 CSS：

.positiveBar {
    fill: blue;
}

.negativeBar {
    fill: red;
}

然后，根据它的值设置栏的类：

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

【讨论】：