Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to add a picture/image into a node? #460

Open
ovjust opened this issue Nov 14, 2024 · 0 comments
Open

how to add a picture/image into a node? #460

ovjust opened this issue Nov 14, 2024 · 0 comments

Comments

@ovjust
Copy link

ovjust commented Nov 14, 2024

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

		;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant