素材巴巴 > 程序开发 >

D3.js--入门

程序开发 2023-09-07 16:22:42

D3.js是一个数据可视化展示的javascript库。其封装了很多方法,类似jquery库,使用方法与jquery类似。


D3.js安装

可以到http://d3js.org/下载D3.zip文件

在使用的时候我们只需引入d3.js即可,如下:


D3的应用

d3的方法,大多返回的是一个D3对象,这就使得他能够使用链式语法。例如:

//选择中所有的

,其文本内容为 www.ourd3js.com,选择集保存在变量 p 中 var p = d3.select("body").selectAll("p").text("www.ourd3js.com");


1.d3选择元素

d3.select():选择所有指定元素的第一个。参数可以是id、元素、样式名

d3.selectAll():选择指定元素的全部。

注意:这两个方法返回的结果即为选择集。


2.d3绑定数据

selection.datum():绑定一个数据到选择集(selection是选择集)

selection.data():绑定一个数组到选择集上,数组的各个数据分别与选择集上各元素绑定

例如:

有3个段落,现在需要将一个字符串分别绑定到3个段落上

----1----

----2----

----3----

js代码如下:

datum绑定

var relevanceObj = d3.select("#relevanceRuleConfig");
 var p = relevanceObj.selectAll("p").datum("成功");
 p.text(function(data,i){return "第"+(i+1)+"段落测试"+data;
 });

效果图:


data绑定

var relevanceObj = d3.select("#relevanceRuleConfig");
 var p = relevanceObj.selectAll("p");
 var dataList = ["我是第一段落","我是第二段落","我是第三段落"];
 p.data(dataList).text(function(data,i){return data;
 });

效果图:


3.d3插入元素

selection.append():在选择集末尾插入元素

selection.insert():在选择集下的第一个元素前面插入元素

例如:

relevanceObj.append("p").text("在末尾插入一个段落");
 relevanceObj.insert("p","#p1").text("在开头插入一个段落");

效果图:



d3删除元素

selection.remove():删除一个选择集元素




标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。