文章/答案/技术大牛

发布

社区首页 >问答首页 >正确缩放DOT图形

问正确缩放DOT图形
EN

Stack Overflow用户

提问于 2019-02-19 04:12:01

回答 4查看 1.6K关注 0票数 2

请,

我需要用D3-GraphViz创建一个SVG图形，它的大小非常适合DIV区域。我试过很多次，但都没有成功。

下面是一个示例代码：

<!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(真)”属性，但是它根本不起作用。有什么想法或例子吗？

d3.js

graphviz

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-02-19 14:56:45

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

票数 3

Stack Overflow用户

发布于 2019-05-28 16:43:06

我也有过同样的问题。刚刚意识到源js太过时了(我也从一个例子中复制了这一行)。只需更改对

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

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

票数 1

Stack Overflow用户

发布于 2019-02-19 04:53:39

我对d3一无所知，但在纯Graphviz中，有一些工具可以控制输出大小，特别是图形属性大小与比率成对。在链接中对它们进行了详细描述，但我仅举一个例子：

没有size ratio**:**或的

digraph {
    c ->d
    a -> b
}

size 和 ratio=compress**:**的

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54758746

复制

相似问题

问正确缩放DOT图形
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确缩放DOT图形EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确缩放DOT图形
EN