D3 条形图 条形颜色缩放

Question

我有一个具有动态条形着色的条形图。 我想确保每次初始化条形图时每个值都保持相同的颜色。

对于我正在使用的颜色缩放：

const color = d3.scaleOrdinal()
                .domain(arr.map(d => d.key))
                .range(d3.schemeSet2);

        let bars = plot.selectAll("rect")
                      .data(arr)

        bars.enter() 
            .append('rect')
            .merge(bars)
                .attr("x", d => xScale(d.key))
                .attr('y', d => yScale(d.value))
                .attr("width", xScale.bandwidth())
                .attr('height',  d => height - (margin.top + margin.bottom) - yScale(d.value))
                .style("fill", d => color(d.key))

我的数据如下：

let arr = [{key: "Software Engineering", value: 68,
{key: "Biomedical Engineering", value: 63},
{key: "Mechanical Engineering", value: 52},
{key: "Other Engineering", value: 46}]

数据被动态地附加到这个数组中。 如果数据以相同的顺序附加，则条形的 colors 在该项目的不同组件中保持相同。 但是，如果数据附加不同，则条形图的 colors 会发生变化。 例如：

let arr = [{key: "Software Engineering", value: 68,
{key: "Mechanical Engineering", value: 52},
{key: "Biomedical Engineering", value: 63},
{key: "Other Engineering", value: 46}]

我无法将颜色硬编码为“软件工程”等，因为值可能会改变。 但是，我希望“软件工程”具有相同的颜色，而与它何时附加到数组无关。

colors 更改时的另一个示例是，如果从数组中删除一个值，则示例如下：

let arr = [{key: "Software Engineering", value: 68,
{key: "Mechanical Engineering", value: 52},
{key: "Other Engineering", value: 46}]

有什么建议么？

Answer 1

当你定义你的图表时，创建一个颜色域，其中的键只能添加，不能删除。 例如，您可以使用 Set。

例子：

I - 固定部分

colorDomain = new Set();
...

II - 动态部分

每次数组改变时，执行这个

...
let arr = [{key: "Software Engineering", value: 68,
           {key: "Mechanical Engineering", value: 52},
           {key: "Biomedical Engineering", value: 63},
           {key: "Other Engineering", value: 46}];

arr.map(item => colorDomain.add(item.key));

colors.domain(Array.from(colorDomain));