D3.js-平行坐标-更改笔刷上的轴的颜色

Question

我正在尝试重新创建Parallel Coordinates示例。

每次刷轴时，我都希望通过更改颜色来使该特定轴高亮。

我该怎么做？

以下是我要实现的屏幕截图：

我在D3.js方面没有太多经验，所以可以提供任何帮助。

谢谢。

Answer 1

这是在平行图表中突出显示刷过的尺寸的一种方法：

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

代码更改：

1. 将维度名称作为ID添加到<g>元素：

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

2. 在拉丝函数中，基于计算的活动尺寸，可以添加selected类。 （这也可以在笔刷cb中完成）

   // 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;
   }
   

如果您有任何疑问，请告诉我。希望这会有所帮助。