web-dev-qa-db-ja.com

D3.jsを使用してフローチャート（ツリーチャートなし）を作成できますか

このようなフローチャートを作成できますか？ enter image description here

D3.js ライブラリを使用してJSONオブジェクトを作成しますか？

Json構造はどのように見えますか？

分析できる例はありますか？

どうもありがとうございました。

d3.jsflowchart
29
Dino

私の謙虚な意見では、D3.jsはこの種の視覚化にはあまり適していません。視覚化は複雑すぎて、データからSVGへの単純なマッピングを行うことができません（そして、それがD3.jsの主な目的です：簡潔なマッピングを通じてデータからDOM（ドキュメント）を生成します）。

データを直接表示するのではなく、モデルを作成し、いくつかの計算を実行し、結果をD3によってSVGに変換するように、間にロジックを導入することにより、これらの制限を回避できます。これが dagre がやろうとしていることであり、かなりうまく機能しています。

ただし、グラフには、そのレイアウトアルゴリズムのより単純な実装では現在サポートされていない特別な制約がいくつかあります。最後のレイヤーでは、フォークのようなレンダリングを取得します。 「決定」層では、ノードの左右にエッジが残るようにエッジに制約を割り当て、決定ノードも同じ層にあるように制約します。

この情報はすべて、グラフ構造自体には表示されません。そのため、モデルにその情報に注釈を付け、これらの制約に従うようにレイアウトアルゴリズムに指示する必要があります。私の知る限り、現在これらの高度なレイアウト機能をサポートしているのは商用グラフ描画ライブラリの実装のみです。

yFiles for HTML はそのようなライブラリです。 このデモ では、次のJSONを使用してこのような結果を取得できます。

Screenshot of image created with yFiles for HTML demo

上部のコンボボックスエントリに切り替えます：「5-複合オブジェクト+エッジラベル」

Nodes Sources、Edges Source、およびNode TemplateセクションのJSONを次のように変更します。

ノードソース

{
0:{'name':'Start',color:'green'}, 
1:{'name':'Read A,B,C',color:'yellow'}, 
2:{'name':'Is B>C?',color:'green'},
3:{'name':'Is A>B?',color:'green'},
4:{'name':'Is A>C?',color:'green'},
5:{'name':'Print B',color:'green'},
6:{'name':'Print C',color:'green'},
7:{'name':'Print C',color:'green'},
8:{'name':'Print A',color:'green'},
9:{'name':'End',color:'red'}
}

エッジソース

[
{from:'0', to:'1', label:''}, 
{from:'1', to:'3', label:''}, 
{from:'3', to:'2', label:'No'}, 
{from:'3', to:'4', label:'Yes'},
{from:'2', to:'5', label:'Yes'},
{from:'2', to:'6', label:'No'},
{from:'4', to:'7', label:'No'},
{from:'4', to:'8', label:'Yes'},
{from:'5', to:'9', label:''},
{from:'6', to:'9', label:''},
{from:'7', to:'9', label:''},
{from:'8', to:'9', label:''}
]

テンプレート

<rect fill='{Binding color}' stroke='LightBlue' stroke-width='2' 
    width='{TemplateBinding width}' 
    height='{TemplateBinding height}'></rect>
<text transform='translate(10 20)' data-content='{Binding name}'   
    style='font-size:18px; font-family:Arial; fill:#000; text-anchor: left;
    dominant-baseline: central;'></text>

別の種類のJSONを使用することも可能です（デモが示すように）。 JSON形式が問題になることはまったくないと思いますし、お分かりのように、まともな結果が得られるとは思いますが、それでも、私が言及した制約は考慮されておらず、JSONに追加されていません。残念ながら、これらの制約の追加は、上記で使用しているデモインターフェイスでは行えませんが、デモの実際のソースコードにコードを追加する必要があります。 このインタラクティブレイアウトデモ で、これらの制約が別のデモ（JSONなし）でどのように機能するかを確認できます。

すべてのビットとピースをまとめると、この種の結果を自動的に簡単に達成できます。

yFiles for HTML Flowchart Demo

この例では、同じ例を見つけてインタラクティブに試すことができます インタラクティブフローチャートレイアウトデモ 。

免責事項：私はそのライブラリを作成する会社で働いていますが、SO/SEでは雇用主を代表していません。私の投稿は自分のものです。

20
Sebastian

このようなフローチャートを作成できますか？

D3はそれを行うことができます。

D3.jsライブラリを使用してjsonオブジェクトを作成しますか？

はい

json構造はどのように見えるべきですか？

プロジェクトへのアプローチ方法によって異なります。私は力のレイアウトを使用して力を削除しているので、JSONは

{node:
    [{
        id: 1,
        title: 'title'
    }],
 link: 
    [{
        source: 0,
        target: 1
    }]
 }

分析できる例はありますか？

あなたのインスピレーションのために

出発点 https://github.com/mbostock/d3/wiki/Force-Layout

テキストをブロックで囲む方法 http://bl.ocks.org/mbostock/7555321

D3.jsは、この種の視覚化にはあまり適していません。視覚化は複雑すぎて、データからSVGへの単純なマッピングを実行できません

理由はわかりませんが、IMOフローチャートは、それらを接続する最も単純なタイプの図、ブロック、および線の1つです。 D3には、ノードとコネクタを描画する手段が組み込まれています。はい、それはすぐに使用できるソリューションです。しかし、あなたがする必要があるのは、学び、カスタマイズすることだけです。

19
Edmund Sulzanok

今日私はこれを調査してきましたが、flowchart.jsは有望に見えます。開始点と終了点、操作、および条件をサポートします。描画された要素のどちら側から線が出るかなどを制御できます。

http://adrai.github.io/flowchart.js/

4
Devon Holcombe