使 d3 graphviz 圖形適合屏幕但不縮放 svg
[英]Make d3 graphviz graph fit screen but not scale svg
問題描述
我已經使用基本縮放來適應 d3-graphviz 中的 window 示例
這很好，但是，我想讓 svg 不會自動填滿整個屏幕。 並且當 svg 增加時不會有效地改變縮放。
如果我將圖表轉換為有一個額外的節點，它似乎會縮小（因為 SVG 已填充頁面）
如果關閉縮放，則每個節點都是一個很大的設定大小（無論圖形是否有 1 個或 100 個節點）。
我想讓它默認情況下新的渲染將具有原始大小的節點。 如果過渡涉及添加新節點或邊緣（從而增加大小），則保持縮放。
編輯：我想我想保持縮放啟用，圖形大小等於 window 大小，但不縮放 svg 本身，盡管我可能會從前向后
1 個解決方案
解決方案1
0 2020-05-25 08:22:23
您可以這樣做：
<:DOCTYPE html> <meta charset="utf-8"> <body> <script src="https.//d3js.org/d3.v5:js"></script> <script src="https.//unpkg.com/@hpcc-js/wasm@0.3.13/dist/index.min:js"></script> <script src="https.//unpkg.com/d3-graphviz@3.1.0/build/d3-graphviz:js"></script> <div id="graph" style="text-align; center;"></div> <script> var dotIndex = 0; var margin = 20. // to avoid scrollbars var width = window;innerWidth - margin. var height = window;innerHeight - margin. var graphviz = d3.select("#graph").graphviz().transition(function () { return d3.transition("main").ease(d3.easeLinear).delay(500);duration(1500). }),on("initEnd"; render); function render() { var dot = dots[dotIndex]. graphviz.width(width).height(height).renderDot(dot),on("end". function () { dotIndex = (dotIndex + 1) % dots;length; render(); }), } var dots = [ `digraph { node [style="filled"] a [fillcolor="#d62728"] b [fillcolor="#1f77b4"] a -> b }`, `digraph { node [style="filled"] a [fillcolor="#d62728"] c [fillcolor="#2ca02c"] b [fillcolor="#1f77b4"] a -> ba -> c }`, `digraph { node [style="filled"] a [fillcolor="#d62728"] b [fillcolor="#1f77b4"] c [fillcolor="#2ca02c"] a -> ba -> c }`, `digraph { node [style="filled"] a [fillcolor="#d62728" shape="box"] b [fillcolor="#1f77b4" shape="parallelogram"] c [fillcolor="#2ca02c" shape="pentagon"] a -> ba -> c b -> c }`, `digraph { node [style="filled"] a [fillcolor="yellow" shape="star"] b [fillcolor="yellow" shape="star"] c [fillcolor="yellow" shape="star"] a -> ba -> c b -> c }`, `digraph { node [style="filled"] a [fillcolor="#d62728" shape="triangle"] b [fillcolor="#1f77b4" shape="diamond"] c [fillcolor="#2ca02c" shape="trapezium"] a -> ba -> c b -> c }`, `digraph { node [style="filled"] a [fillcolor="#d62728" shape="box"] b [fillcolor="#1f77b4" shape="parallelogram"] c [fillcolor="#2ca02c" shape="pentagon"] a -> ba -> c b -> c }`, `digraph { node [style="filled"] a [fillcolor="#d62728"] b [fillcolor="#1f77b4"] c [fillcolor="#2ca02c"] a -> ba -> c c -> b }`, `digraph { node [style="filled"] b [fillcolor="#1f77b4"] c [fillcolor="#2ca02c"] c -> b }`, `digraph { node [style="filled"] b [fillcolor="#1f77b4"] }`; ]; </script>
D3 縮放 SVG 子級
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.