search

magjac / d3-graphviz

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

landscape mode support? #207

Closed hemanthactionfi closed 2 weeks ago

hemanthactionfi commented 2 years ago

is lanscape mode support avaliable? the following graph fails without any error

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script type="text/javascript" src="https://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 { landscape=true  a -> b }');
</script>

if we remove landscape=true it works just fine

magjac commented 2 years ago

Thanks for the report. You've found a bug. Landscape mode uses the rotate transform function in the transform SVG attribute which d3-graphviz currently cannot handle.

This command:

echo "digraph { landscape=true  a -> b }" | dot -Tsvg

renders:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.49.4~dev.20211103.0228 (20211103.0228)
 -->
<!-- Pages: 1 -->
<svg width="116pt" height="62pt"
 viewBox="0.00 0.00 116.00 62.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(-90) translate(-58 112)">
<polygon fill="white" stroke="transparent" points="-4,4 -4,-112 58,-112 58,4 -4,4"/>
<!-- a -->
<g id="node1" class="node">
<title>a</title>
<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-86.3" font-family="Times,serif" font-size="14.00">a</text>
</g>
<!-- b -->
<g id="node2" class="node">
<title>b</title>
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-14.3" font-family="Times,serif" font-size="14.00">b</text>
</g>
<!-- a&#45;&gt;b -->
<g id="edge1" class="edge">
<title>a&#45;&gt;b</title>
<path fill="none" stroke="black" d="M27,-71.7C27,-63.98 27,-54.71 27,-46.11"/>
<polygon fill="black" stroke="black" points="30.5,-46.1 27,-36.1 23.5,-46.1 30.5,-46.1"/>
</g>
</g>
</svg>
magjac commented 2 weeks ago

This issue was fixed by https://github.com/magjac/d3-graphviz/pull/328.