正确缩放 DOT 图形

Question

拜托，

我需要使用 D3-GraphViz 创建一个尺寸完全适合 DIV 区域的 SVG 图形。我尝试了很多，但都没有成功。

这是一个示例代码：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .fade(false)
    .renderDot('digraph  {a -> b}');

</script>

我在 D3 网站上看到“.fit(true)”属性但它根本不起作用。有什么想法或例子吗？

Answer 1

我对d3一无所知，但在纯Graphviz中有控制输出大小的工具，尤其是图形属性size in pair with ratio。它们在链接中有详细描述，但我只举一个例子：

没有size或ratio:

digraph {
    c ->d
    a -> b
}

与 size 和 ratio=compress:

digraph {
    size="10,5"
    ratio=compress
    c ->d
    a -> b
}

如果是js，你可以动态提供size参数，对吧？

Answer 2

您可以使用 CSS 来实现，将 Graphviz 生成的 svg 缩放至主元素的大小 #graph:

#graph svg {
    height: 100%;
    width: auto;
}

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  #graph {
    /* Just an example */
    height: 250px;
  }
  #graph svg {
    height: 100%;
    width: auto;
  }
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .fade(false)
    .renderDot('digraph  {a -> b}');

</script>

Answer 3

我遇到了同样的问题。刚刚意识到源 js 是如此 out-of-date（我也从示例中复制了该行）。只需将引用更改为

<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.min.js"></script>

之后，github 存储库的 README.md 中列出的所有功能都可用。

Answer 4

来自 fit() 方法的文档：

Note that unless the SVG size has been changed, this options has no effect.

下面是一个示例，展示了如何将 SVG 完美地适合 DIV 区域：

<!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-container" style="width: 50%; height: 500px; margin:auto; border: 1px solid black"></div>
<script>

const graphContainer = d3.select("#graph-container");
const width = graphContainer.node().clientWidth;
const height = graphContainer.node().clientHeight;

graphContainer.graphviz()
    .width(width)
    .height(height)
    .fit(true)
    .renderDot('digraph  {a -> b}');

</script>

正确缩放 DOT 图形

Correctly scale DOT graphic

graphviz

d3.js