Question

我正在使用平移和缩放实现d3树版本4。为了使版本3的节点居中，我从版本3示例中找到了以下内容。

$x = "0.05";
$y = (float)$x;
var_dump($y); // float(0.05)

我在版本4中有以下内容

    // Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children.

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

我应该如何实现中心节点以使用版本4？

我的工作d3-tree位于https://github.com/powerxhub/emh-d3-tree

谢谢！

Answer 1

我找到了自己的解决办法：

      centerNode: function(source) {
    var aa = d3Polymer.$.polymerTree.getBoundingClientRect();
    var svg_height = aa.height - 20 - 30;
    var svg_width = aa.width - 90 - 90;

    t = d3.zoomTransform(d3Polymer.$.polymerTree);

    /*
        To keep the node to be centered at the same x coordinate use
        x = t.x;

        To position the node at a certain x coordinate, use
        x =  source.y0;
        x = -x *t.k + 50;

     */
     x = t.x;
     y = source.x0;

    y = -y *t.k + svg_height / 2;

    g.transition()
    .duration(750)
    .attr("transform", "translate(" + x + "," + y + ")scale(" + t.k + ")")
    .on("end", function(){ g.call(zoomListener.transform, d3.zoomIdentity.translate(x,y).scale(t.k))});
  },

我在d3.js rewriting zoom example in version4的相关帖子中找到了它。

你可以在添加了缩放的元素上调用zoomTransform。就我而言，它直接在SVG上。 g 是具有边界SVG g组件的元素。以下是设置缩放的代码：

        zoomListener = d3.zoom()
                      .scaleExtent([.5, 10])
                      .on("zoom", function () {
                          g.attr("transform", d3.event.transform);
                      }
                      );

    g = d3.select(this.$.polymerTree)
          .call(zoomListener)
          .on("dblclick.zoom", null)
          .append("g");

this。$。polymerTree 是SVG元素。

如何在D3.js版本4中执行节点的居中？

1 个答案: