如何用D3.js的Brush功能选择并高亮平行坐标图中的Path

• 核心逻辑调整：从坐标判断转为数据匹配
  放弃直接获取路径节点坐标的思路，利用D3绑定的原始数据进行筛选更可靠。因为每条平行路径都对应一条完整的数据记录，只需检查该记录在所有Brush选中的维度上是否落在区间内，就能判断是否需要高亮。

• brushedParallel函数的具体修改
  以下是关键代码示例，替换原有逻辑：

  function brushedParallel() {
    const selection = d3.brushSelection(this);
    if (!selection) {
      // 没有Brush时恢复所有路径的透明度
      svg.selectAll(".line").style("opacity", 1);
      return;
    }
  
    // 获取每个维度对应的Brush数值范围
    const brushRanges = selection.map(([xStart, xEnd]) => {
      // 计算当前Brush对应的维度索引
      const dimIndex = Math.floor((xStart - margin.left) / (width / dimensions.length));
      const xScale = xScales[dimIndex]; // xScales存储各维度的x比例尺
      return {
        dim: dimensions[dimIndex],
        min: xScale.invert(xStart),
        max: xScale.invert(xEnd)
      };
    });
  
    // 筛选并高亮符合条件的路径
    svg.selectAll(".line")
      .style("opacity", d => {
        // 检查当前数据是否满足所有Brush选中的维度范围
        return brushRanges.every(range => {
          return d[range.dim] >= range.min && d[range.dim] <= range.max;
        }) ? 1 : 0.1; // 符合条件高亮，否则变暗
      });
  }
  

• 关键注意事项

  • 确保xScales数组与dimensions数组的顺序完全对应，这样通过x坐标计算出的维度索引才能准确匹配到对应的比例尺和数据字段
  • 初始化坐标轴时，要将每个维度的x比例尺存储到xScales中，方便Brush函数调用
  • 当Brush被清除时（selection为null），要恢复所有路径的默认样式

内容的提问来源于stack exchange，提问作者Francesca Restante