缩放时的D3裁剪问题

Question

我想在简单的d3图表中使用缩放行为。问题在于，每当我放大时，＆＃34;主要＆＃34; group元素占用整个svg空间，这会导致其他现有元素（如轴和文本）重叠。我已经读过剪辑可以用来解决这个问题，但我没有设法让它正常工作。

以下图片（已应用放大）显示问题：

我到目前为止尝试的相关示例可以找到here。

Answer 1

我终于能够解决这个问题了。要点是：

• 使用适当的svg元素进行剪裁，通常rect会以相应的宽度/高度（与“绘图”区域相同）完成作业。
• 转换剪辑路径（区域）内绘制的所有元素，而不是父组。

在代码中（省略不相关的部分），结果是：

// Scales, axis, etc.
...

// Zoom behaviour & event handler
let zoomed = function () {
  let e = d3.event;
  let tx = Math.min(0, Math.max(e.translate[0], width - width*e.scale));
  let ty = Math.min(0, Math.max(e.translate[1], height - height*e.scale));
  zoom.translate([tx,ty]);
  main.selectAll('.circle').attr('transform', 'translate(' + [tx,ty] + ')scale(' + e.scale + ')');
  svg.select('.x.axis').call(xAxis);
  svg.select('.y.axis').call(yAxis);
}  

let zoom = d3.behavior.zoom()
  .x(x)
  .y(y)
  .scaleExtent([1,8])
  .on('zoom', zoomed);

const svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .attr('pointer-events', 'all')
  .call(zoom);

const g = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// Set clip region, rect with same width/height as "drawing" area, where we will be able to zoom in
g.append('defs')
  .append('clipPath')
  .attr('id', 'clip')
  .append('rect')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', width)
    .attr('height', height);

const main = g.append('g')
  .attr('class', 'main')
  .attr('clip-path', 'url(#clip)');

let circles = main.selectAll('.circle').data(data).enter();