dagre
dagre copied to clipboard
how to add a picture/image into a node?
i tried to use html ,but image doesnot show out.
my codes like this:
that.nodes.forEach(node => {
g.setNode(node.name, {
id: node.name,
width: nodeWidth, height:nodeHeight,
// label: node.nodeName,
labelType: "html",
label: <div style="width:${nodeWidth}px;height:${nodeHeight}px; word-break:break-all;white-space:normal;word-wrap:break-word;">+
(node.avatar? <image style="width:${img_w}px;height:${img_h}px;display:inline-block;" src:"${node.avatar}" />:"")+
<div style="display:inline-block;"> <p style="text-align:center;margin: 2px 0;font-size: large;"> +
node.title +
// (node.level? ( "【"+node.level+"】"):"")+
level+
</p> <p style="text-align:left;margin: 7px 0;"> +
(node.desc||"") +
`</p>
</div> </div>`,
shape: 'rect', //节点形状,可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状,还可以使用render.shapes()自定义形状
style: (node.level?'fill:yellow;stroke:#fff': 'fill:#61b2e4;stroke:#fff'), //节点样式,可设置节点的颜色填充、节点边框
labelStyle: 'fill: #fff;font-weight:bold', //节点标签样式, 可设置节点标签的文本样式(颜色、粗细、大小)
rx: 5*rate1, // 设置圆角
ry: 5*rate1, // 设置圆角
paddingBottom: 15*rate1,
paddingLeft: 20*rate1,
paddingRight: 20*rate1,
paddingTop: 15*rate1,
})
;
});