D3.js 数据绑定入门：从创建 P 元素开始
本文介绍如何使用 D3.js 库进行基础的数据可视化操作。通过一个具体示例，演示如何将数组数据绑定到 HTML 段落元素，利用 enter() 方法动态创建缺失的 DOM 节点，并结合 append()、text() 和 style() 方法实现内容的动态生成与条件样式控制，为后续 SVG 绘图奠定基础。
D3.js 数据绑定入门：从创建 P 元素开始
D3 是一个基于数据驱动的可视化 JavaScript 库，了解 D3 的最佳方式是从最基础的数据加载与显示入手。
HTML 的基本结构在此不再赘述，我们先通过代码示例进行说明。
首先新建一个名为 test 的目录，并在其中创建 demo 和 d3 两个子文件夹。demo 文件夹用于存放编写的 HTML 文件，d3 文件夹用于存放 d3.v3.js 库文件。
在 demo 文件夹下新建 indexP.html 文件，将后续代码复制其中，双击文件在浏览器中打开即可查看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Setting paragraphs' style conditionally, based on data</title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) {
return "I can count up to " + d;
})
.style("color", function(d) {
if (d > 15) { //Threshold of 15
return "red";
} else {
return "black";
}
});
</script>
</body>
</html> 这个简单的 Demo 实现了以下功能：在 body 元素中添加 p 标签，并在 p 标签中插入由 D3 加载的文本内容，同时根据设定的条件函数调整文字颜色。
上述网页代码中，body 内的 JavaScript 代码负责展示页面的数据操作逻辑。在后续的许多示例中，只需修改这部分代码即可，其他部分可视为固定的页面框架。
这里涉及的内容在前文中已有大致讲解。D3 支持链式调用，可以将同一对象的一系列数据操作连接起来，从而便于代码维护。
d3.select("body") 用于选择 body 元素，并将操作链链接到下一个方法。
.selectAll("p") 用于选中页面中所有的段落元素。
.data(dataset) 用于解析并加载数组数据。该数组长度为 5，因此后续链式调用的每个方法都将执行五次，按照数组下标依次针对每个数组元素执行操作。
.enter() 用于创建新的、绑定数据的占位元素（相当于创建了 5 个暂时未指定具体标签的占位符）。
创建的占位元素数量取决于已选中的现有标签数量与加载的数据数组长度的差异。
例如在本例中，如果 body 中的 p 标签数量少于 5 个，则创建缺失的占位元素（当前 body 中 p 标签为 0 个，因此创建 5 个）。
如果现有 p 标签数量多于或等于数据长度，则不创建新占位元素，最终占位元素与原有 p 元素的总个数应等于数据数组的长度 5。
.append("p") 将上述占位元素实际转换为 p 标签元素。
.text(function(d) {}) 用于控制每个段落的显示内容，传入一个匿名函数，通常返回字符串。在该函数中可以编写任意逻辑。
在本例中，该函数使每个段落输出 "I can count up to " 加上相应的数组元素值。
函数格式固定为 function(d)，只有这种形式才能将数据成功加载到函数中。
.style("color","") 用于设置 CSS 的文本颜色属性。与 text 方法类似，设置的字符串也可以通过 function 进行自定义操作。在本例中，如果该段落对应的传入数值大于 15，则将该行文字变为红色。
最终，我们看到的页面效果如图所示：
本文介绍至此，下文将介绍如何在 SVG 中绘制圆形，以及构建简单的力导向图。
免登录快速分享代码：适合面试协作的轻量级JS在线运行工具推荐
2026-11-05 14:45:59
JS空字符串和纯空格转浮点数的结果是什么
2026-11-05 11:04:42
JS在线格式化缩进混乱怎么办？配置项调整技巧
2026-11-04 23:27:25
JS怎么获取秒级时间戳
2026-11-03 21:45:29
JS时间戳怎么从毫秒转换为秒
2026-11-03 20:04:14