html代码:
<div id="id">
<p>Apple</p>
<p id="aa">Pear</p>
<p>Banana</p>
</div>
<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
页面效果:
1.选择元素和绑定数据
- 选择元素
(1) select(): 选择所有指定元素的第一个
var div = d3.select('#id');
var p = div.select("p");
p.style("color","red")
页面效果:
(2) selectAll():选择所有指定元素的全部
var div = d3.select('div');
var p = div.selectAll("p");
p.style("color","red")
页面效果:
- 绑定数据
(1) datum():绑定一个数据到选择集上
var str = "China";
var arr = ['a','b','c']
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d,i){
return "第" + i + "个元素绑定的数据是" + d;
})
页面效果:
上面的代码中，用到了一个无名函数function(d,i){}，其中：
● d 代表数据，也就是与某元素绑定的数据。
● i 代表索引，代表数据的索引号，从 0 开始。
(2) data():绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
var dataset = ["I like dog","I like cat","I like snake"];
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset).text(function(d,i){
return d;
})
页面效果:
2. 插入元素
(1) append():在选择集末尾插入元素
var div = d3.select('#id');
div.append("p").text("append p element");
页面效果:
(2) insert():在选择集前面插入元素
var div = d3.select('#id');
div.insert("p","#aa").text("insert p element");
页面效果:
3. 删除元素
remove():删除一个元素
var div = d3.select("#id");
var p = div.select("p")
p.remove();
页面效果:
4. 一个简单的图表
var width = 300; // 画布的宽度
var height = 300; // 画布的高度 var svg = d3.select("body") // 选择文档中的body元素
.append("svg") // 添加一个svg元素
.attr("width",width) // 设定宽度
.attr("height",height) // 设定高度 var dataset = [250, 210, 170, 130, 90] // 数据（表示矩形的宽度） var rectHeight = 25; // 每个矩形所占的像素高度（包括空白） //----------------------------------------------------------
svg.selectAll("rect") // 选择svg内所有的矩形
.data(dataset) // 绑定数组
.enter() // 指定选择集的enter部分
.append("rect") // 添加足够数量的矩形元素
//----------------------------------------------------------
// 这段代码要牢记，当有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素 .attr("x",20)
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("width",function(d,i){
return d;
})
.attr("height",rectHeight-2) .attr("fill","#ccc"); // 设置颜色
页面效果:
5. 比例尺:将某一区域的值映射到另一区域,其大小关系不变
- 线性比例尺
// 要求:将dataset中最小的值映射成0,最大的值映射成300
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3]; var min = d3.min(dataset);
var max = d3.max(dataset); var linear = d3.scale.linear().domain([min,max]).range([0,300]); console.log(linear(0.9)); // 返回0
console.log(linear(2.3)); // 返回175
console.log(linear(3.3)); // 返回300
d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。d3.min()和d3.max()两个函数经常与比例尺一起出现。值得注意的是，d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：linear(0.9)。
- 序数比例尺: 定义域和值域一一对应关系
var index = [0, 1, 2, 3, 4];
var color = ["red", "blur", "green", "yellow", "black"]; var ordinal = d3.scale.ordinal().domain(index).range(color); console.log(ordinal(0)); // 返回red
console.log(ordinal(2)); // 返回green
console.log(ordinal(4)); // 返回black
- 给柱形图添加比例尺
var width = 500; // 画布的宽度
var height = 500; // 画布的高度 var svg = d3.select("body") // 选择文档中的body元素
.append("svg") // 添加一个svg元素
.attr("width",width) // 设定宽度
.attr("height",height) // 设定高度 var dataset = [2.5, 2.1, 1.7, 1.3, 0.9]; var linear = d3.scale.linear().domain([0, d3.max(dataset)]).range([0, 200]) var rectHeight = 25; 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","#ccc")
修改值域 .range([0, 400]) 后：
柱形图改变。