D3是基于数据操作的可视化js库。要理解D3，我们应该从最基本的可加载数据的显示开始。

html的基本框架就不多说了，先编码再解释：

创建一个新的测试目录，并在这个目录中创建demo和d3文件夹。Demo存储要编写的html文件，d3存储d3.v3.js

在演示文件夹下创建一个新的indexP.html，复制以下代码，然后双击在浏览器中打开它以查看效果。

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' title d :根据数据/标题脚本类型=' text/JavaScript ' src=' http :有条件地设置段落'样式./D3/D3 . v3 . js '/script/head body script type=' text/JavaScript ' var dataset=[5，10，15，20，25]；d3.select('body ')。选择全部(“p”)。数据(数据集)。输入()。追加(' p ')。text(函数(d) { return '我最多可以数到' d；}) .样式(' color '，函数(d){ if(d ^ 15){//阈值为15返回' red '；} else { return ' black} });/script /body /html这个简单的演示实现了在body中添加P标签、在P标签中添加d3加载的文本内容、根据功能设置条件调整文本颜色的功能。

上面的网页代码，正文中的js代码，就是页面上显示的数据操作。对于以后的很多例子，只需修改这一块，其他部分可以视为页面框架。

如前一篇文章所述，d3的链接用于连接同一个对象的分步数据操作，以便于维护。

D3 .选择(“主体”)选择主体元素并将其附加到下一个方法。选择全部(“p”)选择所有段落。数据(数据集)解析并加载数组数据。数组的长度是5。每个串联的方法在未来将执行五次，方法操作将根据数组下标依次对数组元素执行。enter()为绑定数据创建一个新的占位符元素(相当于创建5个暂时未知的标签)。

要创建的数量取决于所选现有标签的数量和加载的数据数组的长度。

如本例所示，如果正文中的P标签少于5个，将创建它(现在正文中有0个P标签，因此创建了5个)。

如果大于，则不会创建，最后一个占位符元素和P元素的总数应为5。追加(' p ')将占位符元素更改为p元素。text(function(d) {})为每个段落的显示内容编写一个匿名函数控件，一般返回一个字符串。在这个方法中，你可以随意写，

这个例子要求他输出我可以在每一段中计算出相应的数组元素值

函数的格式是固定的，只有这样函数(d)才能将数据加载到函数中。style('color '，'')设置css的文本颜色属性。和文本一样，设置的字符串可以通过函数任意操作。在此示例中，如果对应于该段落的传入值大于15，该行将变为红色

最后，我们看到的效果如图所示：

本文就介绍到这里，下面介绍如何在SVG中画一个圆，以及用圆连接的简单力图