d3.js - D3.js - 平行坐标 - 改变画笔轴的颜色

Question

我正在尝试重新创建平行坐标示例。

每次刷轴时，我希望通过颜色变化来突出显示该特定轴。

我该怎么做呢？

这是我正在尝试实现的屏幕截图：

我对 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，可以添加一个类。（这也可以在brushend 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;
   }
   

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