博客

力学图（力导向图）与生活中常见的人物关系图结合，是比较有趣的。本文将以此为凭，阐述在力学图中如何插入外部图片和文字。

在【

第 9.2 章

】中制作了一个最简单的力学图。其后有很多朋友有疑问，主要的问题包括：

• 如何在小球旁插入文字
• 如何将小球换为别的图形
• 如何插入图片
• 如何限制小球运动的边界

本文将对以上问题依次做出解说。其中前三点是 SVG 元素的问题，和 D3 无多大关联。

1. SVG 图片

SVG 的图片元素的详细解说可看【

官方文档-图片

】。通常，我们只需要使用到图片元素的五个属性就够了。

<image xlink:href="image.png" x="200" y="200" width="100" height="100"></image>

其中：

• xlink:href – 图片名称或图片网址
• x – 图片坐上角 x 坐标
• y – 图片坐上角 y 坐标
• width – 图片宽度
• height- 图片高度

在 D3 中插入图片，代码形如：

svg.selectAll("image")
	.data(dataset)
	.enter()
	.append("image")
	.attr("x",200)
	.attr("y",200)
	.attr("width",100)
	.attr("height",100)
	.attr("xlink:href","image.png");

2. SVG 文本

SVG 的文本元素和图片类似，详细属性见【

官方文档-文本

】。

<text x="250" y="150" dx="10" dy="10" font-family="Verdana" font-size="55" fill="blue" >Hello</text>

其中：

• x – 文本 x 坐标
• y – 文本