D3.js画笔（Brush）上下文路径显示过小问题求助

嘿，我碰到过好几次这种情况！你说主图折线正常，但Brush上下文里的路径缩成1px，大概率是上下文的比例尺或路径生成器没正确绑定，下面是具体的排查和修复步骤：

1. 先检查上下文的比例尺配置 #

上下文的x2和y2比例尺必须和主图共享相同的数据定义域，但值域要对应上下文容器的尺寸，千万别搞混：

// 主图x比例尺
x = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

// 上下文x比例尺：和主图同定义域，值域是上下文的宽度
x2 = d3.scaleTime()
    .domain(x.domain()) 
    .range([0, width2]); // width2是上下文容器的实际宽度

// 主图y比例尺
y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .range([height, 0]);

// 上下文y比例尺：同理，值域是上下文的高度
y2 = d3.scaleLinear()
    .domain(y.domain())
    .range([height2, 0]); // height2是上下文容器的实际高度

要是x2/y2的range设成了[0,0]，或者domain没和主图对齐，路径直接就会缩成一个点。

2. 确认上下文路径生成器的配置 #

这是最容易踩坑的地方！上下文的line2路径生成器必须用x2和y2比例尺，不能用主图的x/y：

// 主图路径生成器
line = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.value));

// 上下文路径生成器（划重点！一定要用x2和y2）
line2 = d3.line()
    .x(d => x2(d.date))
    .y(d => y2(d.value));

要是这里误用了主图的比例尺，上下文容器比主图小很多的话，折线就会被压缩到几乎看不见的程度。

3. 检查上下文容器尺寸和Clip路径 #

确保上下文容器的width2/height2是正确设置的，而且Clip路径的尺寸要和上下文容器匹配：

// 定义Clip路径，尺寸对应上下文容器
clip = svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width2)
    .attr("height", height2);

// 上下文的折线必须应用这个Clip路径
context.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("clip-path", "url(#clip)")
    .attr("d", line2);

要是Clip路径的尺寸设错了（比如设成0），折线也会被裁剪得只剩一个点。

4. 验证Brush的Extent设置 #

Brush的范围必须精准对应上下文容器的坐标，不然也会间接影响折线显示：

brush = d3.brushX()
    .extent([[0, 0], [width2, height2]]) // 这里的范围是上下文容器的宽高
    .on("brush end", brushed);

要是Extent设得不对，Brush的交互区域异常，也可能导致折线渲染出问题。

5. 快速调试技巧 #

你可以在控制台打印上下文路径的生成结果，看看坐标值是否合理：

console.log("上下文路径数据：", line2(data));

要是输出的坐标全是(0,0)或者极小值，那肯定是比例尺的问题，回头检查domain和range的设置就行。

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