Dagre-d3 graphlib: Как динамически добавлять новые узлы в граф без перерисовки всего графа? - PullRequest
Новая
       43

Dagre-d3 graphlib: Как динамически добавлять новые узлы в граф без перерисовки всего графа?

1 голос
/ 11 июля 2019

В настоящее время я использую dagre-d3 и graphlib API для рисования ориентированного графа. Язык, который я использую - машинописный. Мой вариант использования - я не хочу отображать весь график одновременно. Что мне нужно реализовать, так это сначала показать некоторые узлы, а затем динамически добавлять соседние узлы, щелкая текущий узел. Мой вопрос посвящен тому, как обновить график. API, который я использую для повторного рендеринга, по-прежнему dagreD3.render (). Кроме этого, я не нашел другого API в dagre-d3, чтобы просто добавить дополнительные узлы. Кажется, что он рендерит весь граф, а не только обновляет добавленные узлы, потому что я замечаю, что порядок узлов изменился, когда я вызываю dagreD3.render () во второй раз. Есть ли способ просто добавить дополнительные узлы, не меняя положения существующих узлов?

Кроме того, я установил обработчик события click и некоторые стили после функции render (inner, g). Если я использую dagreD3.render () для повторного рендеринга графика, мне нужно снова установить обработчик событий и стили. Я правильно использую dagreD3.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', () => {.....});
    }
  }
...