ロゴ メインコンテンツへ
RSSフィード
「Web 開発」に関連する記事一覧

d3-graphviz でノード上に画像を表示する

2022/07/15
(この記事の文字数: 353)

Webページ上で人物相関図のようなグラフを描きたくなったので、d3-graphviz を使ってみたんですが、ノード上に画像を表示する方法が一癖あったので、メモしておきます。

ポイントとしては dot ソース内で画像を参照する場合は addImage() が必要な点です。例えば、images/test1.png、images/test2.png を表示する場合は renderDot() 前に以下のように addImage() する必要があります。


	d3.select('#graph')
		.graphviz()
		.fade(false)
		.zoom(false)
		.addImage('images/test1.png','100px','100px')
		.addImage('images/test2.png','100px','100px')
		.renderDot(dotSource);
      

以下がサンプルです。

以下がサンプルのソースです。viz.js 等は CDN 版を利用しているので、画像のパスだけ変更すればコピペで動作すると思います。


<div id="graph" style="text-align: center;"></div>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.2/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.js"></script>
<script>
	let dotSource = `digraph  {
	rankdir="BT"
	node [shape=rect,fontname="times bold", fontsize="10", fillcolor="2",style="filled",colorscheme="blues4"];
	"ヒルダ"[label=<
	    <table cellspacing='0' border='0' cellborder='0'>
	        <tr><td><img src='blog/images/FehCylPortraits/CYL_Hilda_Three_Houses_War_Arc.png' /></td></tr>
	        <tr><td>ヒルダ</td></tr>
	    </table>
	>];"ホルスト"[label=<
	    <table cellspacing='0' border='0' cellborder='0'>
	        <tr><td><img src='blog/images/FehCylPortraits/CYL_Holst_Three_Houses.png' /></td></tr>
	        <tr><td>ホルスト</td></tr>
	    </table>
	>];"ヒルダ"->"ホルスト"[label="兄"];
	}`;
	
	d3.select('#graph')
		.graphviz()
		.fade(false)
		.zoom(false)
		.addImage('blog/images/FehCylPortraits/CYL_Hilda_Three_Houses_War_Arc.png','100px','100px')
		.addImage('blog/images/FehCylPortraits/CYL_Holst_Three_Houses.png','100px','100px')
		.renderDot(dotSource);
</script>

このサンプルでは、html-like label で画像を表示していますが、nodeのimageアトリビュートでも表示する事は確認しました。


  このエントリーをはてなブックマークに追加  

<<「Web 開発」の記事一覧に戻る

コメント(0 件)



コンテンツロード: 0.008 sec
Copyright(C)2006-2024 puarts All Rights Reserved