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

您可以使用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 2

我对d3一无所知，但是在纯Graphviz中，有一些工具可以控制输出大小，尤其是图形属性size与ratio配合使用。通过链接对它们进行了详细描述，但让我仅显示一个示例：

没有size或ratio：

digraph {
    c ->d
    a -> b
}

带有size和ratio=compress：

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

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

Answer 3

我有同样的问题。刚意识到源js太过时了（我也从示例中复制了这一行）。只需将引用更改为

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

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

Answer 4

摘自fit()方法的文档：

请注意，除非已更改SVG大小，否则此选项无效。

下面是一个示例，展示了如何将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图形

4 个答案: