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中保留线条颜色

2 个答案: