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 に答える