在使用Dagre縮放後重新呈現HTML d3

編輯我找到了一個解決方案，使用稍舊版本的dagre-d3庫（4.11）。如果任何人都可以找到最新版本的問題，那也會有幫助。謝謝在使用Dagre縮放後重新呈現HTML d3

我使用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我將能夠確保圖形保持縮放和重新好後-rendering。但這種情況並非如此。我的所有節點都成爲我是否縮小小，大，如果我放大。

來源

2016-10-22 db2791

你說的「保持良好」是什麼意思？ –

我不結晶的問題清楚，但它可能是因爲您在

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

第二行包括 .scale(currentZoomScale)

然後你再次在innner.attr()中縮放它？

來源

2016-10-24 22:04:13

我已經嘗試過，沒有它 – db2791

在我看來，問題就出在這裏：

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

如果你看一下你的代碼的順序，也沒有<g>當你定義inner。所以，在這一點上，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

來源

2016-10-25 03:29:41

在使用Dagre縮放後重新呈現HTML d3

回答

相關問題