我碰到过不少D3平行坐标系的类似问题，你描述的情况是典型的刷选过滤状态和坐标轴排序不同步导致的——当你拖拽改变坐标轴顺序后，原来的过滤逻辑还在依赖旧的坐标轴索引，没法匹配新的顺序，最终导致所有路径都被过滤掉，自然就看不到了。

问题复现回顾 #

• 在column1刷选0.8至0.4的区域
• 在column3刷选0.7至0.4的区域
• 将column3拖拽到column2位置，路径停止绘制

核心原因 #

大部分D3 V4平行坐标系的示例里，刷选的过滤范围是用坐标轴的索引位置来存储的（比如第0个、第2个坐标轴）。当你拖拽重排坐标轴后，原来的索引对应的维度已经变了，过滤逻辑找不到有效的匹配条件，就会把所有路径都判定为不符合，所以路径就消失了。

具体修复方案 #

1. 改用坐标轴唯一标识存储过滤范围

不要用索引，而是用坐标轴的名称（比如column1、column3）作为键来存储每个维度的刷选范围，这样不管坐标轴怎么排序，都能精准匹配对应的维度。

首先给每个坐标轴元素添加一个存储名称的属性：

// 创建坐标轴的时候，给每个坐标轴组加data-dimension属性
var axes = g.selectAll(".axis")
  .data(dimensions)
  .enter().append("g")
  .attr("class", "axis")
  .attr("data-dimension", function(d) { return d; }) // 这里d是坐标轴名称，比如column1
  .attr("transform", function(d, i) { return "translate(" + x(i) + ")"; })
  .call(d3.axisLeft(y));

然后修改刷选的回调逻辑，用名称存储范围：

// 全局变量存储每个维度的刷选范围
var brushExtents = {};

// 给每个坐标轴绑定brush事件
var brush = d3.brushY()
  .extent([[-10, 0], [10, height]])
  .on("brush end", function(event) {
    var dimensionName = d3.select(this.parentNode).attr("data-dimension");
    var selection = event.selection;

    // 更新存储的刷选范围：有选框就存，没有就删除
    if (selection) {
      brushExtents[dimensionName] = selection;
    } else {
      delete brushExtents[dimensionName];
    }

    // 重新过滤并更新路径
    updateFilteredPaths();
  });

axes.append("g")
  .attr("class", "brush")
  .call(brush);

2. 基于当前坐标轴顺序过滤路径

修改过滤逻辑，遍历存储的刷选范围，用维度名称匹配数据：

function updateFilteredPaths() {
  // 过滤数据：只有满足所有刷选维度的路径才保留
  var filtered = data.filter(function(d) {
    return Object.keys(brushExtents).every(function(key) {
      var extent = brushExtents[key];
      return extent[0] <= d[key] && d[key] <= extent[1];
    });
  });

  // 更新路径绘制
  renderPaths(filtered);
}

3. 拖拽坐标轴后重新触发路径更新

在坐标轴拖拽排序的回调里，调用updateFilteredPaths()，确保坐标轴顺序改变后，路径能基于新顺序和保留的刷选范围重新绘制：

// 假设你用d3.drag实现坐标轴拖拽排序
axes.call(d3.drag()
  .on("start", function(event) {
    // 拖拽开始的初始化逻辑，比如记录初始位置
  })
  .on("drag", function(event) {
    // 处理坐标轴位置更新的逻辑
    // ...
  })
  .on("end", function(event) {
    // 拖拽结束后，重新排序坐标轴并更新路径
    reorderAxes(); // 你原来的重排逻辑
    updateFilteredPaths(); // 重新绘制路径
  })
);

4. 确保路径绘制用当前坐标轴顺序

最后，在绘制路径的renderPaths方法里，要基于当前页面上的坐标轴顺序来生成路径点，而不是原始顺序：

function renderPaths(filteredData) {
  // 获取当前页面上的坐标轴顺序（按x坐标排序）
  var currentDimensions = d3.selectAll(".axis")
    .sort(function(a, b) {
      var x1 = parseInt(d3.select(a).attr("transform").split("(")[1]);
      var x2 = parseInt(d3.select(b).attr("transform").split("(")[1]);
      return x1 - x2;
    })
    .data();

  // 生成路径的line函数，基于当前坐标轴顺序
  var line = d3.line()
    .x(function(d) { return x(currentDimensions.indexOf(d.name)); }) // 用当前顺序的索引获取x坐标
    .y(function(d) { return y(d.value); });

  // 更新路径
  var paths = g.selectAll(".path")
    .data(filteredData);

  paths.enter().append("path")
    .attr("class", "path")
    .merge(paths)
    .attr("d", function(d) {
      return line(currentDimensions.map(function(name) {
        return {name: name, value: d[name]};
      }));
    });

  paths.exit().remove();
}

这样修改后，不管你怎么拖拽重排坐标轴，之前的刷选过滤条件都会保留，路径也会按照新的坐标轴顺序正确绘制出来。

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