Dagreを使用してズームした後にHTMLを再レンダリングするd3

Question

少し古いバージョンのdagre-d3ライブラリ（4.11）を使用したソリューションが見つかりました。誰かが最新のバージョンで問題を見つけることができれば、それも役立ちます。ありがとうございました

私はDagre d3を使用してグラフを描画しています。

私が最初に私のグラフを描画すると、ユーザーが特定のノード上でクリックしたとき、私は

g = new dagreD3.graphlib.Graph() 
      .setGraph({}) 
      .setDefaultEdgeLabel(function() { return {}; }); 
var svg = d3.select("svg"), 
      inner = svg.select("g"); 
      svgGroup = svg.append("g"); 
var render = new dagreD3.render(); 

     render(d3.select("svg g"), g); 

     var zoom = d3.behavior.zoom().on("zoom", function() { 
       inner.attr("transform", "translate(" + d3.event.translate + ")" + 
        "scale(" + d3.event.scale + ")"); 
       currentZoomScale = d3.event.scale; 
       currentPosition = d3.event.translate; 

      }); 
     svg.call(zoom); 

はその後、私はそのノードのラベルにHTMLを追加したいです。うまくズームや再後

g.node(id).label += "<div>" + inputTemplate + "</div>"; 

var zoom = d3.behavior.zoom() 
     .scale(currentZoomScale) 
     .on("zoom", function() { 
     inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")") 
        }); 
     svg.call(zoom); 

     d3.select("svg").on("dblclick.zoom", null); 
     inner.attr("transform", "translate(" + currentPosition + ")" + "scale(" + currentZoomScale + ")"); 

私は currentPositionと currentZoomScaleを維持することによって、私は、グラフの滞在を確認することができるだろうと思った

：これは私が次のように行うのグラフを、私は再レンダリングしない限り表示されません。 -レンダリング。しかし、そうではありません。私はにズームインするとき、すべての私のノードが、私はズームアウト場合より小さく、かつ大きくなる。

Answer 1

私は問題のクリアクリスタルないんだけど、あなたが

var zoom = d3.behavior.zoom() 
     .scale(currentZoomScale) 
     .on("zoom", function() { 
     inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")") 
        }); 
     svg.call(zoom); 

     d3.select("svg").on("dblclick.zoom", null); 
     inner.attr("transform", "translate(" + currentPosition + ")" + "scale(" + currentZoomScale + ")"); 

の2行目に .scale(currentZoomScale)が含まれているので、それができます

を入力してから、innner.attr()に再度サイズを変更していますか？

Answer 2

問題がここにあるように私には思える：

var svg = d3.select("svg"), 
    inner = svg.select("g"); 
    svgGroup = svg.append("g"); 

あなたのコードの順序を見ればあなたがinnerを定義するときに、何の<g>はありません。したがって、この時点でinnerはnullです。チャートを再レンダリングすると、グループが表示され、innerはnullになります。

このように、可能な解決策は、単に順番を変更している。

var svg = d3.select("svg"), 
    svgGroup = svg.append("g");//we first append the <g>..  
    inner = svg.select("g");//and only after that we select it