d3.js在version4中重写缩放示例

Question

拖放示例

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

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 D3 V4发布说明缩放上我想我只是对我如何用新版本做这件事感到困惑.我的centerNode函数的最后几行不起作用,当我将节点置于缩放和平移重置时...

有什么建议吗？

Answer 1

因此,经过大量挖掘和反复试验后,我找到了一个非常适合我的目的的答案.请注意,下面的代码只是我的代码的相关部分,而不是整个代码,某些变量是自解释的,所以不包括它们.这也是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元素的不可见矩形; 这可以确保它接收输入,并且指针坐标不受缩放行为变换的影响.平移和缩放示例

在中心节点函数中,我d3.zoomTransform(zoomer.node());用来获取应用于页面的当前变换.此功能的目的只是使可折叠树垂直居中而不是水平居中,所以我保持当前transform.x(此处t.x)相同.我的svg中的坐标是翻转因此y= source.x0,source是在我的可折叠树中单击的节点.("查看引用此主题顶部的示例以了解我要转换为版本4的内容)

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

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

上面这一行是应用x和y的平移以及一个比例 - 它等于当前状态 - 对于标识矩阵必须得到G的新变换,然后我将它应用到zoomer我调用的元素zoom在早些时候.

这对我来说就像一个魅力!