3

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

此外，我在 render(inner,g) 函数之后设置了单击事件处理程序和一些样式。如果我使用 dagreD3.render() 重新渲染图形，我需要再次设置事件处理程序和样式。我正确使用 dagreD3.render() 吗？

我正在使用打字稿语言。所以代码在一个类中。我将 Graph 和 render 设置为类中的成员。它们用于这两个功能。

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', () => {.....});
    }
  }
4

0 回答 0