0

我被困在这个问题上，需要帮助。我正在尝试在 HTML 页面中显示多个 DAG（基于 dagre-d3）。这些 DAG 的节点和边来自元组列表，其中元组的形式为 (DAG_name, [list_of_nodes], [list_of_edges])。这个元组被传递给我的 HTML，我遍历这个元组列表并将节点和边的列表发送到一个 javascript 函数，然后形成 dagre-d3 graphlib 图形对象。然后将该对象传递到 SVG 并最终渲染。问题是 HTML 总是呈现最后一个图形对象（基于最终节点和边列表）。我已经在控制台中打印了节点和边列表以及每次迭代的图形对象，并且它们打印正确。问题似乎与渲染有关。我已经尝试过 Chrome 和 Safari，两者都有相同的结果。

<html lang="en">
  <meta charset="utf-8">
  <!--script src="https://d3js.org/d3.v5.js"></script-->
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

  {%  block main %}
  {% for rec in list_of_tuples %}

  <div class="container-fluid">
  <h4> Data changes along the lineage for the entity <u>{{ rec[0] }} </u></h4>

  <svg id="svg-canvas" xmlns="http://www.w3.org/2000/svg"/></svg>

  <script>

    (function () {

    var nodes_list = {{ rec[1]|tojson }};
    var edges_list = {{ rec[2]|tojson }};
    console.log(nodes_list)
    // Create the input graph
    var grph = new dagreD3.graphlib.Graph()
      .setGraph({'align': 'UL', 'rankdir': 'RL', 'ranker': 'longest-path'})
      .setDefaultEdgeLabel(function() { return {}; });

    for(index in nodes_list){
        grph.setNode(
            nodes_list[index].id,
            {label: nodes_list[index].name, class: "node", id: nodes_list[index].id, height: 50, width: 200, labelStyle: "font-size: 0.90em"}
        );
    }

    grph.nodes().forEach(function(v) {
      var node = grph.node(v);
      // Round the corners of the nodes
      node.rx = node.ry = 5;
      //node.width = 180;
    });

    // Set up edges, no special attributes.

    for(index in edges_list){
        //temporarily switching it to check it out, revert it back.
        grph.setEdge(
            edges_list[index].source,
            edges_list[index].destination,
            {
                curve: d3.curveBasis ,
                id:String(edges_list[index].source)+"-"+String(edges_list[index].destination),
                label: edges_list[index].label,
                labelStyle: "font-size: 0.70em",
                class: "edge",
                height: 30,
                width: 50
            }
        );
    }

    // Create the renderer
    var render = new dagreD3.render();

    // Set up an SVG group so that we can translate the final graph.
    var svg = d3.selectAll("svg");
    svgGroup = svg.append("g");

    // Run the renderer. This is what draws the final graph.
    render(d3.select("svg g"), grph);

    // Center the graph
    svg.attr("width", grph.graph().width + 10);
    svg.attr("height", grph.graph().height + 100);
    var xCenterOffset = (svg.attr("width") - grph.graph().width) / 2;
    svgGroup.attr("transform", "translate(" + xCenterOffset + ", 50)");

    console.log(grph)

    })();
  </script>

  <!--script src="code_edge.js"></script-->

  </div>
  {% endfor %}
  {% endblock %}

<div>
      <li class="nav-item"><a href="{{ url_for('home') }}" class="nav-link">Back to Home</a></li>
</div>

</html>
4

0 回答 0