D3.jsバージョン4でノードのセンタリングを実行するにはどうすればよいですか？

Question

私はパンとズームでd3ツリーバージョン4を実装しています。ノードをバージョン3でセンタリングするには、バージョン3の例から次のものを見つけました。私はバージョン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]); 
} 

私は

 _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-ツリーが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"); 

この$ polymerTree SVG要素です。