D3.js带缩放折线图缩放时图例与图表重叠如何解决？

问题背景 #

给D3.js的带缩放功能折线图添加图例时，执行了以下操作：

1. 添加图例元素代码：

// Add legend rectangle
line.append('rect')
          .attr('x', width - 80)
          .attr('y', 90)
          .attr('width', 10)
          .attr('height', 10)
          .style('fill', "steelblue");

// Add legend text 
line.append("text")
          .attr('x', width - 65)
          .attr('y', 100)
          .text('Blue line');

2. 修改X轴缩放范围预留图例空间：

var x = d3.scaleTime()
      .domain(d3.extent(data, function(d) { return d.date; }))
      .range([ 0, width - 100  ]);

但缩放时图例与图表出现重叠，效果如下：

解决步骤 #

1. 将图例放到独立容器中 #

图例不能添加到图表的可缩放<g>元素内，要单独创建一个不受缩放影响的容器：

// 直接在SVG根元素下创建图例容器
const legend = svg.append('g')
  .attr('transform', `translate(${width - 80}, 90)`); // 固定定位到右侧

// 添加图例矩形
legend.append('rect')
  .attr('width', 10)
  .attr('height', 10)
  .style('fill', "steelblue");

// 添加图例文本
legend.append("text")
  .attr('x', 15)
  .attr('y', 10)
  .text('Blue line');

2. 确保缩放时图表区域不侵占图例空间 #

找到处理缩放的zoom回调函数，保持X轴的range始终预留图例宽度；同时调整刷子的范围，避免覆盖图例区域：

// 缩放回调函数中保持X轴range不变
function zoom(event) {
  x.domain(event.transform.rescaleX(x2).domain());
  lineGroup.attr("transform", event.transform);
  xAxis.call(d3.axisBottom(x)); // X轴的range初始已设为[0, width-100]，无需修改
}

// 调整刷子的范围，不包含图例区域
var brush = d3.brushX()
  .extent([[0, 0], [width - 100, height2]]) // 宽度同样减去100
  .on("brush end", brushed);

3. 优化SVG宽度（可选） #

如果原SVG宽度刚好容纳图表，可适当增大总宽度，让图例显示更合理：

const svg = d3.select("#my_dataviz")
  .append("svg")
  .attr("width", width + 100) // 原width基础上加100作为图例空间
  .attr("height", height + margin.top + margin.bottom);

通过以上修改，图例处于独立的非缩放容器，图表区域始终预留图例空间，缩放时就不会出现重叠问题了。

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