d3.js在版本4中重写缩放示例

d3.js rewriting zoom example in version4

本文关键字：重写 缩放 js 版本 d3      更新时间：2023-09-26

拖放示例

我正试图重写上面这个例子的一部分，以便在我的代码中使用，特别是这篇文章：

function centerNode(source) {
        scale = zoomListener.scale();
        x = -source.y0;
        y = -source.x0;
        x = x * scale + viewerWidth / 2;
        y = y * scale + viewerHeight / 2;
        d3.select('g').transition()
            .duration(duration)
            .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
        zoomListener.scale(scale);
        zoomListener.translate([x, y]);
    }

然而，由于v4包发生了很大的变化，我陷入了困境。我将zoomListener函数编写为

    var zoomListener = d3.zoom()
                 .scaleExtent([0.3,2])
                 .on("zoom", zoomed);
    function zoomed() {
       transform = d3.event.transform;
       console.log(d3.event);
         svg.attr("transform", transform);
    } 
function centerNode(source){
  t = transform;
  console.log(t);
  x = t.x*t.k; //I only want things to be centered vertically
  y = (t.y + -source.x0)*t.k + (viewerHeight)/2 ;
  svg.transition()
     .duration(duration)
     .attr("transform","translate(" + x + "," + y +")scale(" + t.k + ")");
  transform.scale(t.k); //DOES NOT WORK
  transform.translate([x, y]); //DOES NOT WORK
}

我知道根据文档，事情已经发生了变化，信息不再存储在我的zoomListener上D3V4关于变焦的发布说明我想我只是对如何使用新版本感到困惑。我的centerNode函数的最后几行不起作用，当我将节点居中时，缩放和平移重置。。。

有什么建议吗？

因此，经过多次挖掘和尝试，我得出了一个非常适合我的答案。请注意，下面的代码只是我代码的相关部分，而不是整个代码，某些变量是不言自明的，因此不包括它们这也是d3.js的第4版。

var zoom = d3.zoom()
             .scaleExtent([0.3,2])
             .on("zoom", zoomed);

var svg = d3.select("body")
            .append("svg")
              .attr("width", viewerWidth)
              .attr("height", viewerHeight);
var zoomer = svg.append("rect")
                .attr("width", viewerWidth)
                .attr("height", viewerHeight)
                .style("fill", "none")
                .style("pointer-events", "all")
                .call(zoom);
var g = svg.append("g");
zoomer.call(zoom.transform, d3.zoomIdentity.translate(150,0)); //This is to pad my svg by a 150px on the left hand side
function zoomed() {
  g.attr("transform", d3.event.transform);//The zoom and panning is affecting my G element which is a child of SVG
}
function centerNode(source){
  t = d3.zoomTransform(zoomer.node());
  console.log(t);
  x =  t.x;
  y = source.x0;
  y = -y *t.k + viewerHeight / 2;
  g.transition()
   .duration(duration)
   .attr("transform", "translate(" + x + "," + y + ")scale(" + t.k + ")")
   .on("end", function(){ zoomer.call(zoom.transform, d3.zoomIdentity.translate(x,y).scale(t.k))});

}

根据d3.js页面上v4的示例，我使用了一个矩形将缩放应用于

缩放行为应用于覆盖SVG的不可见矩形要素这样可以确保它接收输入，并且指针坐标不受缩放行为的变换的影响。Pan&缩放示例

在Center节点函数中，我使用d3.zoomTransform(zoomer.node());来获取应用于页面的当前变换。这个函数的目的只是使可折叠树垂直居中，而不是水平居中，所以我保持当前的transform.x（此处为t.x）不变。我的svg中的坐标是翻转的，因此为什么y= source.x0，源是我的可折叠树中单击的节点。（"看看这个线程顶部引用的例子，了解我试图转换到版本4的内容）

我将转换应用于我的G元素，然后我想将这些更改提交给缩放转换，为此，我使用.on("end", function(){})，否则它会对转换进行奇怪的行为，通过这样做，它所做的只是设置转换的当前状态。

zoomer.call(zoom.transform, d3.zoomIdentity.translate(x,y).scale(t.k))

上面的这一行是将x和y的平移以及一个等于当前状态的比例应用于恒等矩阵，以获得G的新变换，然后将其应用于zoomer，也就是我之前称之为zoom的元素。

这对我来说很有魅力！

调用transform.scale和transform.translate返回一个新的转换，并且不修改任何内容。因此：

transform = transform.translate([x, y]).scale(k)
svg.call(zoomListener.transform, newTransform)

（在这一点上，zoomListener是一个非常不准确的名称，但无论如何…）

k、x和y可以从source导出，也许正如你所展示的，但我不确定，因为我不知道source是什么。但对我来说，t.x*t.k看起来很可疑，因为它将现有的变换x乘以它的比例。似乎会引起反馈循环。

有关放大v4的更多信息，请查看这篇相关的StackOverflow文章，或者通过mbostock演示对元素（本例中为canvas）的缩放转换的编程控制，并包括转换。

相关文章：