时间戳

首页 > 解决方案 > 使用 d3.zoom d3 v4 拖动时图表跳转

d3.js - 使用 d3.zoom d3 v4 拖动时图表跳转

问题描述

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

我想放大箭头，以便在页面加载时它们填满屏幕。这很好用，但是当我平移（通过 ctrl + 拖动背景）时，它会从我的自动缩放位置跳到原点。

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

这是我设置缩放的代码：

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})`);
 }
}

当我单击并拖动时，如何阻止图表从翻译位置跳转到原点？

标签： d3.js

解决方案

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

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) 最后将缩放事件绑定到 svg 元素以提供缩放功能

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

推荐阅读