D3 v4多折线图Brush问题：拖动刷时出现NaN错误

嘿，我帮你排查过类似的D3 Brush触发NaN错误的问题，结合你的多折线图场景，大概率是Brush事件处理时的比例尺转换、数据绑定或者联动逻辑出了问题，给你一步步拆解修复方案：

1. 定位核心问题：Brush事件中x轴Domain计算错误 #

当拖动Brush时D3抛出NaN，通常是因为主图的x轴比例尺x被设置了非法的domain值，导致折线的x坐标计算返回NaN。最常见的错误是没有正确将Brush的像素范围转换为数据域的值。

修复Brush事件处理函数 #

你的brushed函数需要正确处理Brush选择范围，并将其转换为数据域，同时要处理Brush被清除的情况：

function brushed() {
  // 避免Brush和Zoom事件循环触发
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;
  
  var selection = d3.event.selection;
  if (!selection) {
    // 当Brush被清除时，重置x轴domain为初始值（和Brush轴x2的domain保持一致）
    x.domain(x2.domain());
  } else {
    // 将Brush的像素范围转换为数据域（用x2比例尺反转）
    x.domain(selection.map(x2.invert));
  }
  
  // 更新所有折线的路径（重点：要遍历所有.line元素重新计算）
  focus.selectAll(".line")
      .attr("d", function(d) { return line(d.values); });
  
  // 更新主图的x轴
  focus.select(".axis--x").call(xAxis);
  
  // 同步Zoom变换（如果用了Zoom联动）
  if (selection) {
    var k = width / (selection[1] - selection[0]);
    var tx = -selection[0] * k;
    svg.select(".zoom").call(zoom.transform, d3.zoomIdentity.scale(k).translate(tx, 0));
  }
}

2. 确保Brush轴比例尺x2和主图x轴保持同步 #

Brush轴的比例尺x2必须和主图的x比例尺共享相同的初始domain，否则反转像素范围时会得到错误的值：

// 初始化主x轴比例尺
var x = d3.scaleTime().range([0, width]).domain(d3.extent(data, function(d) { return d.date; }));
// 初始化Brush轴x2比例尺，domain和x完全一致
var x2 = d3.scaleTime().range([0, width]).domain(x.domain());

3. 检查数据格式是否合法 #

D3的scaleTime要求输入的日期是合法的Date对象，如果你的数据中date是字符串，必须先解析：

// 假设你的日期格式是"YYYY-MM-DD"，根据实际格式调整解析器
var parseDate = d3.timeParse("%Y-%m-%d");
// 遍历数据解析日期
data.forEach(function(d) {
  d.date = parseDate(d.date);
  // 可以加个校验，避免解析失败导致NaN
  if (!d.date) console.error("Invalid date:", d.date);
});

如果日期解析失败会返回null，传入x(d.date)就会得到NaN。

4. 确认折线生成器的x属性绑定正确 #

你的折线生成器必须使用主图的x比例尺来计算x坐标，不能误用Brush轴的x2：

var line = d3.line()
    .x(function(d) { return x(d.date); }) // 用主x比例尺，不是x2
    .y(function(d) { return y(d.value); });

按照上面的步骤逐一排查修复，应该就能解决拖动Brush时的NaN错误了。

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