magjac / d3-graphviz

Graphviz DOT rendering and animated transitions using D3
BSD 3-Clause "New" or "Revised" License
1.69k stars 103 forks source link

Can not draw an edge in the graph #279

Closed chouzz closed 1 year ago

chouzz commented 1 year ago

Hi, seems d3-graphviz lost an edge in the graph, here is an example:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph")
  .graphviz()
    .renderDot(`digraph {graph [style="filled",fillcolor="#edf0f7",color="grey50",tooltip=" "]
node [style="filled",fillcolor="#a2b4d6",color="#000000",fontname="Helvetica",fontsize="10",shape="record"]
edge [fontname="Helvetica",fontsize="10",labelfontname="Helvetica",labelfontsize="10",tooltip=" "]
subgraph
"cluster_oam_a1a9"{ id="oam_a1a9" style="filled, dashed" label="oam" "common_adfb"
subgraph 
"cluster_lldp_07c4"{ id="lldp_07c4" style="filled, bold" label="lldp" "db_49c8" "orch_e19d"}}

"common_adfb" [id="common_adfb" label="common" tooltip="src/oam/common/"];
"orch_e19d" [id="orch_e19d" label="orch" tooltip="src/oam/lldp/orch/"];
"db_49c8" [id="db_49c8" label="db" tooltip="src/oam/lldp/db/"];

"common_adfb" -> "orch_e19d" [id="common_adfb^orch_e19d" label="8" color="red"];
"orch_e19d" -> "common_adfb" [id="orch_e19d^common_adfb" label="29" color="red"];
"orch_e19d" -> "db_49c8" [id="orch_e19d^db_49c8" label="3" color="red"];
"db_49c8" -> "common_adfb" [id="db_49c8^common_adfb" label="1" color="red"];

}`);

</script>

Actual: image Expect: image

In the last line, I have "db_49c8" -> "common_adfb" [id="db_49c8^common_adfb" label="1" color="red"]; edge, but this is not displayed, but if I remove any other edges, this edged will be rendered, is it a bug?

magjac commented 1 year ago

Thanks for the detailed report. When running your DOT source through Graphviz dot itself, it says:

Warning: flat edge between adjacent nodes one of which has a record shape - replace records with HTML-like labels
  Edge db_49c8 -> common_adfb
Error: lost db_49c8 common_adfb edge

Here's some discussions about this problem:

I'm closing this issue since there's nothing d3-graphviz can do about this, but thanks again for a well-written and easy-to-reproduce issue. :slightly_smiling_face:

chouzz commented 1 year ago

Thanks for quick reply. We solve this issue by changed record to polygon according to your links. Now, it works good to me.