参考方法：
1：d3-graphviz/用图片替换node形状 2：动态添加image
一、
官方文档提示支持image属性、网络文章说也支持shapefile
按照viz.js的要求添加图形 addImage(path,width,height)、
要在renderDot()和dot()之前完成操作
且声明addImage可多次调用、路径可以（相对路径、绝对路径、URL）
宽高的尺寸可为多种，如：px,cm,pt,pc.......
实际使用时（先以image为例）
digraph += "b[image='http://pic.baike.soso.com/p/20090711/20090711101754-314944703.jpg'];a->b;}";
d3.select("#coordinate").graphviz()
.addImage('http://pic.baike.soso.com/p/20090711/20090711101754-314944703.jpg','100px','100px')
.renderDot(digraph)
解决方法: 单双引号互换(括号内)
↓修改后↓
（图片没显示）报错消失 出现：违反警告（被动事件监听器和处理耗时）
被动监听：是chrome附带的功能（用于提高滚动性能）
所有现代浏览器都具有线程化滚动功能，即使在运行昂贵的JavaScript时也可以使滚动平稳运行，但是这种优化在某种程度上因需要等待任何touchstart和touchmove处理程序的结果而被挫败，这可能会完全阻止滚动通过在事件上调用preventDefault（）
解决方案：-{passvive:true}
可以释放浏览器并且增加用户平滑体验
addEventListener（document，“ touchstart”，function（e）{console.log（e.defaultPrevented）;
//将为假e.preventDefault（）; //由于监听器是被动的，因此不执行任何操作console.log（e.defaultPrevented）;
//仍然为假}，Modernizr.passiveeventlisteners？{passive：true}：false）;
调整警告和处理后：
↓解决后效果↓
会出现白色边框可以修改边框形状 shape =
个人觉得想要去除边框在componentDidUpdate内动态修改就好
添加后图片单位无法用百分比替代 只能给专属数值（可能会出现部分误差，现没不好全预防）
问题：text的样式（背景,效果）
二、
动态添加image
思路：
1：(获取间隔值)通过获取左侧第一个path和第二个path的X坐标 用数值大的减去数值小的得出的值 减去箭头的宽度值
2：(动态添加rect,defs>pattern>image)显示效果↓
问题：位置有偏差 每个图片的大小要比path的大 一点点 数据越多偏差越明显
