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. 在 brushed 函数中，基于计算出的 active 维度 ，一个 selected class可以加。 （这个也可以在brushend cb中完成）

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

3. 在上一步应用的class的基础上，使用CSS高亮笔刷路径（可根据自己的需要随意更改）：

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

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