在使用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

回答

相关问题