前端实现D3使用图片展示在节点上

createThreeD(list) {
        //异步渲染  一般用于在弹框渲染中  直接展现在页面也可以忽略
        setTimeout(() => {
          //获取D3     rankdir   LR控制流程图横向扩张
          var g = new dagreD3.graphlib.Graph().setGraph({rankdir: "LR"});
          // 添加节点
          list.nodeInfos.forEach((item, index) => {
            item.rx = item.ry = 5;//圆角
            // 设置背景为白色
            item.style = 'fill:white;'
            // 设置渲染元素的类型
            item.labelType = 'html'
            var img
			//判断显示图片
            if(item.noteType==="pm_equipment_pipe"){
            	//在这里插入图片描述
siding这里的是引入本地的图片
                img = this.siding
            }
            // 设置添加图片
            if(item.whetherTheWholeShow){
                item.label= `<div class="node-label-html" style="text-align:center"><span class="node-label"> <img style="width:50px;height:50px" src="${img}" alt="" /></i><br/>${item.label}<br/>前量：${item.fort}<br/>后量：${item.after}<br/>变化量：${item.change}</span></div>`
            }else{
                item.label= `<div class="node-label-html" style="text-align:center"><span class="node-label"> <img style="width:50px;height:50px" src="${img}" alt="" /></i><br/>${item.label}<br/>变化量：${item.change}</span></div>`

            }
            //添加节点
            g.setNode(item.id, item);
          });
          // 链接关系
          list.edges.forEach(item => {
            g.setEdge(item.source, item.target, {
              // 连线上的条件字
              label: item.label,
              // 连线的颜色
              style: "stroke: #0fb2cc; fill: none;",
              // 箭头颜色
              arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;",
              // 箭头形状（vee表示箭头是尖的，默认是平的）
              arrowhead: 'vee',
            });
          });

          //绘制图形(此处和darg中的不同)
          var svg = d3.select("#flowchart")
            .append('svg')
            .attr('width', 1050)
            .attr('height', 500)
          var inner = svg.append("g");
          //缩放
          var zoom = d3.zoom().on("zoom", function () {
            inner.attr("transform", d3.event.transform);
          });
          svg.call(zoom);
          var render = new dagreD3.render();
          render(inner, g);
          let code;
          // inner.selectAll("g.node")
          //   .on("click", e => {//点击事件
          //     code = this.list.nodeInfos.filter(item => {
          //       return item.id == e;
          //     });
          //   })
          //   .on('mouseover', e => {//鼠标经过事件
          //     let curNode = g.node(e)
          //   });
          // 初始化缩放比例
          var initialScale = 1;
          // 设置宽高
          svg.call(
            zoom.transform,
            d3.zoomIdentity
              .translate(
                (svg.attr("width") - g.graph().width * initialScale) / 2,
                20
              )
              .scale(initialScale)
          );
          svg.attr("height", g.graph().height * initialScale + 100);
        }, 0);
      },
```![实例图片](https://img-blog.csdnimg.cn/8e6760657c4145c78ea7ce3d5cdc1b21.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6KeC5bGxLg==,size_20,color_FFFFFF,t_70,g_se,x_16)