d3.js

最新推荐文章于 2025-06-08 09:02:33 发布

原创最新推荐文章于 2025-06-08 09:02:33 发布 · 2k 阅读

CC 4.0 BY-SA版权

D3.js 是一种用于创建数据可视化的JavaScript库，擅长处理数字、数组、JSON等数据，尤其在处理SVG和GeoJSON图形方面表现出色。它结合HTML、SVG和CSS，实现动态且交互式的数据展示。D3的操作流程包括数据加载、绑定、变换和过渡。学习D3主要涉及数据绑定、选择和操作DOM元素的方法，如d3.select、d3.selectAll、d3.data等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、D3是什么？

D3.js是一种数据操作类型的javascript库（也可视其为插件），用于创建数据可视化图形。

二、D3可以处理哪些类型的数据呢？

它接受数字、数组、字符串、或对象也可以处理JSON和GeoJSON数据。

D3 最擅长处理矢量图形（SVG 图或GeoJSON 数据）。

三、 D3有何特点？

结合HTML,SVG和CSS，D3可以图形化的，生动的展现数据。

四、 D3 官方网站是http://d3js.org。

五、D3 代码在客户端执行（即在用户浏览器，而不是Web服务器中执行），因此想要可视化的数据必须发送到客户端。

D3操作数据文档要经历以下几步：

• 把数据加载到浏览器的内存空间；

• 把数据绑定到文档中的元素，根据需要创建新元素；

• 解析每个元素的范围资料（bound datum）并为其设置相应的可视化属性，实现元素的变换（transforming）；

• 响应用户输入实现元素状态的过渡（transitioning）。

学习D3 的过程，就是学习那些告诉它如何加载、绑定数据，变换和过渡元素的语法的过程。

绑定数据：

数据可视化说到底就是把数据映射到图形上。D3 为了实现映射，需要把数据绑定到DOM中的元素上。

如何绑定数据：

通过D3 的selection.data() 方法把数据绑定到DOM 元素。但必须具备两个条件：

• 数据；

• 选中的DOM 元素。

1. 加载 csv 数据

var dataset; // 声明全局变量

d3.csv("food.csv", function(data) {

// 把CSV 数据交给全局变量

dataset = data;

// 调用生成可视化图表的其他函数

generateVisualization();

});

2.加载JSON数据

d3.json("waterfallVelocities.json", function(json) {

console.log(json); // 输出到控制台

});

<scripttype="text/javascript">

var dataset = [ 5, 10,15, 20, 25 ];

d3.select("body").selectAll("p")

.data(dataset)

.enter()

.append("p")

.text(function(d){

return "Ican count up to " + d;

})

.style("color",function(d) {

if (d > 15) { //Threshold of 15

return"red";

} else {

return"black";

}

});

</script>

• d3

引用D3 对象，从而能够调用其方法。

• d3.select("body")

选择DOM 中的body 元素，把它交给连缀方法中的下一个方法。

• .selectAll("p")

选择DOM 中的所有段落。因为还没有段落，所以返回空元素。可以认为这个空元素代表马上就会创建的段落。向select() 方法传入一个CSS 选择符作为输入，（如果你想取得一个元素，可以使用select() 方法，它就会返回一个对DOM 中匹配的第一个元素的引用。)

• .data(dataset)

解析并数出数据值。dataset数组中有5 个值，因而此后的所有方法都将执行五遍，每次针对一个值。

• .enter()

要创建新的绑定数据的元素，必须使用enter()。这个方法会分析当前选择的DOM元素和传给它的数据，如果数据值比对应的DOM元素多，就创建一个新的占位元素。

• .append("p")

取得由enter() 创建的空占位元素，并把一个p 元素追加到相应的DOM中。• .text("Newparagraph!")

text() 接受一个字符串，把它插入到当前元素的开始和结束标签之间。因为上一个方法传递过来一个p 元素，因此这里就会把文本插入到<p> 和</p> 之间。

（如果标签间原来有内容，原来的内容会被覆盖。）

d3.js和jQuery一样，是链式语法。

d3.js常用方法

1. d3.select()：使用CSS选择器语法从DOM中选择单一元素。

如：d3.select("body");

2. d3.selectAll()：选择所有符合要求的元素。

如：d3.select("body").selectAll("p");//选中body中所有的p元素

3. selection.append()：创建元素，并追加到选集（selection）的尾部。

如：d3.select("body").append("p");//创建p元素，并追加到body的子元素中最后一个

4. selection.text()：设置文字内容。

如：d3.select("body").append("p").text("New");//为p元素添加文字内容

.classed("bar", true);用于快速地添加或删除元素的类。

d表示当前数据值，可以使用一个匿名函数处理这个数据。

5. selection.data()：把数据绑定到DOM元素上，数值会存储在DOM元素的__data__属性中

如：d3.select("body").selectAll("p").data(dataset);

6. selection.enter()：创建新的绑定数据的元素时需要使用该方法，它首先检查DOM，然后将数据传递给DOM，如果数值数量多于对应的DOM元素，则该方法会创建新的占位元素，并将其链接向下传递

d3.select("body").selectAll("p").data(dataset).enter().append("p").text("Newparagraph!");

7. selection.style()：改变CSS样式

如：d3.select(“div”).style(“height”,“10px”); css优先级高于attr

8. attr()：改变HTML属性值的方法

如：d3.select("div").attr("class","bar");

9. selection.classed()：快速从元素中应用或移除类的方法

如：d3.select("div").classed("bar",true);

d3.layout.force 力导向布局

force.on 事件监听

force.nodes 节点

force.links 链接

force.size 布局大小

force.linkDistance 链接的长度

force.linkStrength 链接的强度。默认为1范围[0,1]

force.friction 摩擦系数，1代表无摩擦范围[0,1]

force.charge 电荷强度负值排斥，正值吸引

force.resume 等同于alpha(.1);通常情况下，你不需要直接调用此方法，它是通过启动时自动调用。它也可以自动在拖动手势调用拖累。

force.stop 用来显式地停止模拟 alpha(0)

force.tick 画图

D3力导向图中常用方法介绍：

force.gravity 引力强度，默认0.1 值越大越缩在一起

force.theta 影响两个相连的节点，充电力是全球性的：每个节点会影响所有其他节点，即使他们是在断开连接子图。默认为0.8

force.start 设置生效启动模拟，首次创建布局时此方法必须被调用，分配节点和链接，每当节点或链路发生变化再次调用

force.alpha 冷却参数，如果大于0,将会重新布局

force.drag 使用鼠标或触摸行为绑定到节点，以允许交互式拖动