Question

我目前正在为客户制作一些图表，并发现难以按照我想要的方式自定义颜色。我在React中使用D3并使用隆隆图表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>

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

Answer 1

在基于CSS的解决方案中，首先根据类别设置CSS以使条形着色：

.positiveBar {
    fill: blue;
}

.negativeBar {
    fill: red;
}

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

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

D3自定义颜色在单个系列数据中

1 个答案: