D3.js - Параллельные координаты - Изменить цвет оси на кисти

Question

Я пытаюсь воссоздать Пример параллельных координат .

Каждый раз, когда ось чистится, я бы хотел, чтобы эта конкретная ось была подсвечена изменением цвета.

Как мне это сделать?

Вот скриншот того, что я пытаюсь реализовать:

У меня нет большого опыта работы с D3.js, поэтому любая помощь приветствуется.

Заранее спасибо.

Answer 1

Вот один из способов выделить выделенные размеры на параллельной диаграмме:

https://bl.ocks.org/shashank2104/92bed39893773d085794be54b73c233e/56b1c0df3fa1579c6a6f60ef9f660e99901af935

Изменения кода:

1. Добавлено имя измерения в качестве идентификатора для элемента <g>:

   .enter().append("g")
   .attr("class", "dimension").attr('data-id', function (d) { return d;})
   

2. В функции почищено щеткой на основе вычисленных активных размеров , класс selected может быть добавлен.(это также можно сделать в б.б.)

   // highlight brushed axes
   dimensions.forEach(function(dimension) {
      svg.select('g[data-id="'+dimension+'"]').classed('selected', actives.indexOf(dimension) > -1);
   });
   

3. На основе класса, примененного на предыдущем шаге, используйте CSS, чтобы выделить путь кисти (не стесняйтесь изменить это каксогласно вашим требованиям):

   /* selected brushing dimension */
   g.dimension.selected .axis path.domain {
      stroke: red;
      stroke-width: 2px;
   }
   

Дайте мне знать, если у вас есть какие-либо вопросы.Надеюсь, это поможет.