【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图

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

在【第 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 坐标