您的位置：首页 > Web前端 > JavaScript

D3.js学习总结

2016-08-05 14:47 477 查看

一、选择、插入和删除操作

选择使用select或者selectAll，分别是选择一个和选择全部
append("插入节点")：在选择集末尾插入元素
insert("插入节点", "选定的元素")：在选择集前面插入元素
remove()；
上面四个操作是建立在选项集的基础上的

<body>
<p>apple</p>
<p id="del">Pear</p>
<p>Banana</p>
<script type="text/javascript">
var body = d3.select("body");
body.select("#del").style("color", "green");
var p1 = body.select("p");
p1.style("color", "red");

p1.append("p").text("this is a append element");
body.insert("p", "#del").text("this is a insert element");
body.select("#del").remove();
</script>
</body>

二、D3给DOM中数据赋值

datum() 赋值一个数据到选项集中
data()  赋值一个数组到选项集中

示例：

# html代码：
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

# JS代码———使用datum()
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
return "第 "+ i + " 个元素绑定的数据是 " + d;
});
# 执行结果
第 0 个元素绑定的数据是 China
第 1 个元素绑定的数据是 China
第 2 个元素绑定的数据是 China

#JS代码———使用data()
var dataset = ["I like dogs","I like cats","I like snakes"];
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
.text(function(d, i){
return d;
});
# 执行结果
like dogs
I like cats
I like snakes

三、D3比例尺的使用

线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺。

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
//将dataset中最小的值，映射成0;将最大的值，映射成300。
var min = d3.min(dataset);
var max = d3.max(dataset);
//两个函数能够求数组的最大值和最小值，是 D3 提供的。

var linear = d3.scale.linear()
//d3.scale.linear()返回一个线性比例尺。
.domain([min, max])
.range([0, 300]);
//domain()和range()分别设定比例尺的定义域和值域

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

序数比例尺

//有时候，定义域和值域不一定是连续的。例如，有两个数组：

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

//我们希望 0 对应颜色 red，1 对应 blue，依次类推。
//但是，这些值都是离散的，线性比例尺不适合，需要用到序数比例尺。
var ordinal = d3.scale.ordinal()
.domain(index)
.range(color);
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black
//用法与线性比例尺是类似的。

柱状图+序数比例尺示例：

var width = 300;
var height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);

//var dataset = [250, 210, 170, 130, 90, 200, 234];

var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
var linear = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 250]);

var rectHeight = 25;
//var svg = body.select("svg");
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 20)
.attr("y", function(d, i) {
return i * rectHeight;
})
.attr("width", function(d){
return linear(d);
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue");

注意：enter()数的作用是返回一个新的D3()对象集合，这个集合包含了所有没有被可视化啊的数据。这是D3将数据与图形的联系定义的一种模式（enter-update-exit）叫作Enter Mode

四、定义坐标轴

// 数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
// 定义比例尺
var linear = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 250]);

var axis = d3.svg.axis()
.scale(linear)      //指定比例尺
.orient("bottom")
//指定刻度的方向,bottom 表示在坐标轴的下方显示。
.ticks(7);          //指定刻度的数量

定义了坐标轴之后，只需要在 SVG 中添加一个分组元素 ，再将坐标轴的其他元素添加到这个 里即可。代码如下：

svg.append("g").call(axis);
//在D3中，call() 的参数是一个函数。调用之后，将当前的选择集作为参数传递给此函数。

参考资料：ourd3js.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航