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

【问题标题】：How to perform a centering of a node in D3.js version 4?如何在 D3.js 版本 4 中执行节点居中？
【发布时间】：2017-05-17 22:33:43
【问题描述】：

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

    // 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 中有以下内容

      _treeChanged: function() {
    console.log(this.localName + '#' + this.id + ' tree data has changed');
    // Assigns parent, children, height, depth
    var aa = this.$.polymerTree.getBoundingClientRect();
    var svg_height = aa.height - 20 - 30;
    var svg_width = aa.width - 90 - 90;
    this.root = d3.hierarchy(this.tree, function(d) { return d.children; });
    this.root.x0 = svg_height / 2;
    this.root.y0 = 0;

    if (g) {
      g.remove();
    }

    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");

    if (this.treemap) {
      this.update(this.root);
      this.centerNode(this.root);
    }
  },

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

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

谢谢！

【问题讨论】：

标签： javascript d3.js tree

【解决方案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 来获得 t。就我而言，它直接在 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 元素。

【讨论】：