如何在 D3 中保留线条颜色

Question

我在 D3 中创建了一个多折线图。每行根据一个颜色数组得到特定的颜色，如下：

var colors = ["#357ca5", "#001F3F", "#00c0ef", "#39cccc", "#00a65a", "#605ca8", "#f39c12", "#f56954", "#D81B60", "#d2d6de"];

for (var lineIndex = 0; lineIndex < filteredLines.length; lineIndex++) {
            svg.append("path")
                .datum(<any>filteredLines[lineIndex].data)
                // routine line stuff..
                .style("stroke", colors[lineIndex])

在图表下方，我有每条线的图例，单击它会禁用该线并显示剩余的线。我使用上面的 filteredLines 集合实现了这一点，其中我根据图例单击将 isVisible 属性设置为 true 或 false。

问题是，一旦禁用了一行，上面的for循环就会遍历其余的行并正确呈现它们；但是线条颜色是根据 colors[lineIndex] 设置的，所以每次都会得到不同的值。

我想要的是所有线条每次都获得相同的颜色，无论它是可见的还是隐藏的。我怎样才能做到这一点？我应该实现某种从线条到颜色的映射吗？任何帮助表示赞赏。谢谢。

Answer 1

我建议您为实际的线数据添加颜色，而不是通过数组获取它。然后参考颜色，如 filteredLines[lineIndex].color。

您可能希望第一次将颜色信息附加到每行。

Answer 2

我通常保留一个对象来映射我想要的值的颜色和我的数据的键。就我而言，这是可行的，因为我们的数据主要是静态的。不知道这个方法对你有没有帮助。

var colorMapping = {
    a: '#FFFFFF',
    b: '#D2D2D2
}
....
.style("stroke", colorMapping[a])

如何在 D3 中保留线条颜色

How to retain line colors in D3

javascript

data-visualization

graph

graph-visualization

d3.js