dagre icon indicating copy to clipboard operation
dagre copied to clipboard

how to add a picture/image into a node?

Open ovjust opened this issue 1 year ago • 0 comments

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,
		})

		;
});

ovjust avatar Nov 14 '24 07:11 ovjust