4

我想以编程方式绘制控制理论和系统分析中使用的类型的框图。参见例如http://en.wikibooks.org/wiki/Control_Systems/Block_Diagrams。

我找到的最好的工具是http://blockdiag.com/但是边缘标签不是很好：我需要不在盒子里和边缘一侧的标签。

为了了解这个问题，我得到（来自blockdiag）： http://interactive.blockdiag.com/?compression=deflate&src= eJyr5lJQcFTQtVNwAhHO1kAuGIC5LgrROYlJqTm2SklKsXApF4hymFQiSKoWABD8D8U

相关qns： 电路/框图绘图

4

3 回答 3

2

您可以使用以下在线工具以编程方式绘制带有 LaTeX 样式 MathJax 标签的 SVG 框图：http: //puzlet.com/m/b00b1。这里的初始框图示例是一个控制系统（http://en.wikipedia.org/wiki/State_observer）。它的来源是 CoffeeScript。您编辑图表源以满足您的需要或从新的画布开始，然后将图表导出为 SVG（独立文件或保存在服务器上的图表的链接）。

于 2014-03-03T17:57:23.850 回答
2

参加聚会太晚了，但现在您不必在 d3.js 和 graphviz 之间做出选择。您可以同时使用d3-graphviz：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="http://viz-js.com/bower_components/viz.js/viz-lite.js"></script>
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.1.2/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

  var dot = `
digraph G {
    graph [rankdir=LR]
    node [shape="polygon"]
        A -> B -> C;
        B -> D [label="b"];
        D -> B [label="a"];
}
`;

  d3.select("#graph").graphviz()
    .renderDot(dot);

</script>

于 2017-08-31T16:54:15.910 回答
0

那么 d3.js 和 graphviz 都应该能够产生您正在寻找的那种结果。如果您的问题是选择哪一个，从 gaphviz 生成 png 或 pdf 文件更容易，但使用 d3.js 创建交互式可视化更容易。

于 2013-07-10T08:37:01.917 回答