d3.js在version4中重写缩放示例 [英] d3.js rewriting zoom example in version4

问题描述

拖放示例

我试图重写上面这个例子的一部分来使用我的代码，特别是这一块：

I am trying to rewrite part of this example above to use in my code, specifically this piece:

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函数为

However I am getting stuck since the v4 package has changed quite a bit. I wrote my zoomListener function to be

    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

}

我知道根据doc事情已经改变，信息不再存储在什么是我的zoomListener
D3 V4发布说明放大我想我只是困惑，我怎么假设做的新版本。我的centerNode函数的最后几行不起作用，当我中心的节点缩放和平移重置...

and I know that according to the doc things have changed and info are no longer are stored on what would be my zoomListener D3 V4 release note on zoom I guess I am just confused on how I am suppose to do it with the new version. The last few lines of my centerNode function don't work which has for effect that when I center the node the zooming and panning reset...

任何建议？ p>

Any suggestion?

推荐答案

所以经过大量的挖掘和尝试和错误后，我想出一个答案，很适合我的目的。注意下面的代码只是我的代码的相关部分，而不是整个代码，某些变量是自我解释，所以没有包括他们。 也就是d3.js的第4版。

So after much digging and trial and error I cam up with an answer that works pretty well for my purposes. Note that this code below is only the relevant part of my code not the whole code, certain variable were self explanatory so did not include them. ALSO THIS IS IN VERSION 4 of d3.js.

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页面，我使用一个矩形将缩放应用到

As per the examples for v4 on the d3.js page, I used a rectangle to apply the zoom to

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

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

In the Center node function I am using d3.zoomTransform(zoomer.node()); to get the current transform applied to the page. The purpose of this function is only to center the collapsible tree vertically not horizontally, so I am keeping the current transform.x (here t.x) the same. The coordinate in my svg are flip hence why y= source.x0, source is a what node was clicked in my collapsible tree. ("Look to the example referenced to the top of this thread to understand what I am trying to convert to version 4)

我将转换应用于我的G元素，然后我想提交这些更改放大变换，这样做使用 .on（end，function（）{}）否则它是做奇怪的行为通过这样做，它所做的就是设置变换的当前状态。

I am apply the transformation to my G element and then I want to commit those changes to the zoom transform, to do so I use the .on("end", function(){}) otherwise it was doing weird behavior with the transition, by doing that all it does is setting the current state of the transform.

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

应用x和y的平移以及等于当前状态的尺度到识别矩阵必须为G得到新的变换，然后将其应用于 zoomer 这是我之前调用 zoom 的元素。

This line above is applying a translation of x and y and a scale -- that is equal to what the current state -- to the identiy matrix has to get a new transform for G, i then apply it to zoomer which is the element I called zoom on earlier.

这对我来说是一个魅力！

This worked like a charm for me!

这篇关于d3.js在version4中重写缩放示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！