Question

我目前正在使用dagre-d3和graphlib API绘制有向图。我使用的语言是打字稿。我的用例是我不想一次渲染整个图。我需要实现的是首先显示一些节点，然后通过单击当前节点来动态添加相邻节点。我的问题集中在如何更新图形。我用来重新渲染的API仍然是dagreD3.render（）。除此之外，我没有在dagre-d3中找到其他API来添加其他节点。似乎它重新呈现了整个图，而不仅仅是更新了添加的节点，因为当我第二次调用dagreD3.render（）时，我注意到节点的顺序已更改。有什么方法可以仅添加其他节点而无需更改现有节点的位置？

此外，我在render（inner，g）函数之后设置了click事件处理程序和一些样式。如果使用dagreD3.render（）重新呈现图形，则需要再次设置事件处理程序和样式。我是否正确使用dagreD3.render（）？

我正在使用打字稿语言。所以代码在一个类中。我将Graph设置为类中的成员。它们在两个函数中都使用。

class directedGraph{
    // The original graph.
    var g = new dagreD3.graphlib.Graph().setGraph({});
    var render = new dagreD3.render();

    function generateGraph() {
    // Add some nodes and edges to g. Omitting for loop here.
    this.g.setNode(node.Id, ...);
    this.g.setEdge(edge.v, edge.w,...);
    var svg = d3.select("svg"),
    var inner = svg.select("g");
    // Set up zoom support
    var zoom = d3.zoom().on("zoom", function() {
          inner.attr("transform", d3.event.transform);
        });
    svg.call(zoom);

    // Run the renderer. This is what draws the final graph.
    this.render(inner, this.g);
    // Set styles
    inner.selectAll('g.node').select('text')....
    // Add click event handler.
    inner.selectAll('g.node').on('click', () => {.....})
    }
    //////////////////////////////////////////////////
    // The updateGraph() function is triggered by a button outside the
    // graph. The updateGraph() is almost the same as generateGraph() 
    // except the zoom part.
    //////////////////////////////////////////////////
    function updateGraph() {
      // Add additional nodes and edges to g. Omitting for loop here.
      this.g.setNode(node.Id, ...);
      this.g.setEdge(edge.v, edge.w,...);
      var svg = d3.select("svg"),
      var inner = svg.select("g");

      // Run the renderer. This is what draws the final graph.
      this.render(inner, this.g);
      // Set styles to the element.
      inner.selectAll('g.node').select('text').style(...);
      // Add click event handler.
      inner.selectAll('g.node').on('click', () => {.....});
    }
  }

Dagre-d3 graphlib：如何在不重绘整个图的情况下将新节点动态添加到图中？

0 个答案: