Question

d3如何引用svg图标，并且可以改变图标颜色

d3力导向图节点使用svg图标，点击的时候可以改变图标颜色

Answer 1

1. 如果你不懂svg，请参考这里：http://www.w3school.com.cn/svg/index.asp

柱形图是一种最简单的可视化图标，主要有矩形、文字标签、坐标轴组成。本文为简单起见，只绘制矩形的部分，用以讲解如何使用 D3 在 SVG 画布中绘图。



画布是什么

前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。

要绘图，首要需要的是一块绘图的“画布”。

HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。

SVG 是什么

SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。

SVG 有如下特点：

SVG 绘制的是矢量图，因此对图像进行放大不会失真。

基于 XML，可以为每个元素添加 JavaScript 事件处理器。

每个图形均视为对象，更改对象的属性，图形也会改变。

不适合游戏应用。

Canvas 是什么

Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。

Canvas 有如下特点：

绘制的是位图，图像放大后会失真。

不支持事件处理器。

能够以 .png 或 .jpg 格式保存图像

适合游戏应用