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アトリビュートでも表示する事は確認しました。
