Как сохранить цвета линий в 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 в соответствии с щелчком по клику.

Проблема заключается в том, что после того, как линия отключена, цикл выше для цикла пробегает оставшиеся строки и корректно отображает их; но цвет линии устанавливается в соответствии с colors[lineIndex], поэтому каждый раз он получает различное значение.

Я хочу, чтобы все линии получали один и тот же цвет каждый раз, независимо от того, что это видно или скрыто. Как я могу это достичь? Должен ли я реализовать какое-то отображение из строки в цвета? Любая помощь приветствуется. Спасибо.

Answer 1

Я предлагаю вам добавлять цвета к вашим фактическим данным линии, а не получать их через массив. Затем обратитесь к цвету, например filterLines [lineIndex] .color.

Впервые вы хотите прикрепить информацию о цвете к каждой строке.

Answer 2

Обычно я сохраняю объект, который отображает цвета моих желаемых значений и ключи моих данных. В моем случае это возможно, потому что наши данные в основном статичны. Я не знаю, поможет ли вам этот подход.

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