Question

我正在使用d3绘制一堆箭头（通过链接连接的节点）。当按下ctrl键并单击并拖动背景时，我正在使用d3.zoom转换背景。

我想放大箭头，以便页面加载时它们会填满屏幕。这可以正常工作，但是当我平移（按ctrl键并拖动背景）时，它会从我的自动缩放位置跳到原点。

（在这里，我通过计算自动变换/比例，获取顶部svg元素的子组并设置其transform属性来进行翻译）

这是我设置缩放的代码：

zoom(width, height){

 // Get autozoom translate and scale
 const autozoom = this.AutoZoom(width, height);

 // Bind zoom event to top level svg and on zooom append transform attribute to svg > g
 topSvg.call(d3.zoom()
  .scaleExtent([1, 2])
  .on("zoom", () =>
    svgG.attr("transform", (e) => {
      return d3.event.transform;
    }))
 );

 //Make the initial transform to translate grop
 if ((autozoom != null) ) {
  svg.attr("transform", `translate(${autozoom .translate})scale(${autozoom.scale})`);
 }
}

单击并拖动时如何阻止图表从平移位置跳到原点？

Answer 1

经过一番挖掘，我找到了答案。因此，在具有缩放功能的页面上执行初始缩放时，需要完成三件事：

1）计算转换/缩放svg所需的数量，然后为svg下的组设置transform属性。

  const groupZoom= this.GetSvgZoom(width, height);
  // svgGroup = svg > g
  svgGroup.attr("transform", `translate(${groupZoom.translate})scale(${groupZoom.scale})`);

2）现在页面已经移动，您需要通知缩放事件从平移位置开始。

  const extent = this.GetZoomOrigin(width,height);
  d3.zoom().translateTo(svg, extent.translate[0], extent.translate[1]); 
  d3.zoom().scaleTo(svg, extent.scale);

3）最后将zoom事件绑定到svg元素以提供缩放功能

svg.call(d3.zoom()
  .on("zoom", () =>
    svgGroup.attr("transform", d3.event.transform))
 );

借助d3.zoom d3 v4，图表在拖动时跳跃

1 个答案: