本文介绍了D3.js的基本使用，包括如何下载和引用，以及其最大特色——数据绑定到DOM元素。通过示例展示了选择、添加、插入和删除DOM元素的操作，并对比了D3与传统JavaScript的区别。此外，详细讲解了D3绘制直方图的步骤，包括添加矩形、文字以及实现动态更新。最后，通过按钮实现直方图数据的排序和添加。
一、d3的下载 绑定
到官网下载：http://d3js.org
最好采用本地引用：<script src=“d3.v3.min.js” charset=“utf-8”></script>
当然也给出网络引用的方式：<script src=“http://d3js.org/d3.v3.min.js” charset=“utf-8”></script>
上述版本号可以根据要求自行更改
一个简单的例子：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 400; //SVG绘制区域的宽度
var height = 400; //SVG绘制区域的高度
var svg = d3.select("body") //选择<body>
.append("svg") //在<body>中添加<svg>
.attr("width", width) //设定<svg>的宽度属性
.attr(“height”, height);//设定<svg>的高度属性
svg.append("circle")
.attr("cx","50px")
.attr("cy","50px")
.attr("r","50px")
.attr("fill","blue");
</script>
二、d3的最大特色
d3的最大特色就是绑定到容器DOM中，在选择数据集的时候，d3采用select和selectAll的方式分别可以返回第一个元素或者返回所有元素。
例如：
d3.select(“body”)
d3.select(“#important”)
d3.selectAll(“.content”)
D3的添加、插入删除代码如下：
selection.append(name)
selection.insert(name[,before])
Selection.remove()
但是上述的操作（select），并没有绑定数据，只是选了数据集。
绑定相同的元素时我们采用：
selection.datum([value]) 分别绑定不同元素的时候我们采用：
selection.data([values[,key]) 给出一个绑定数据的例子，比如有一个dataset=[3,6,9]。代码如下：
<script>
var dataset=[3,6,9];
var p=d3.select("body").selectAll("p");
var update=p.data(dataset);
console.log(update);
</script>
如果这段代码采用p.datum(dataset)，会取得不一样的效果：
根据数组长度和元素数量的关系，我们采用不同的绑定数据方式：
Update：数组长度=元素数量
enter：数组长度>元素数量（）
Exit：数组长度<元素数量（多余数据退出）
Data()默认是索引序号绑定的。
三、JS与D3的比较
如果采用JAVASCRIPT选择DOM元素：例如：
<body> <p>北京</p> <p>朝阳区</p> <script> var para=document.getElementsByTagName("p"); for (var i=0;i<para.length;i++){ var para1=para.item(i); para1.innerHTML="Hello World"; } </script> </body>但是如果采用D3选择DOM元素，例如：
<script src="d3.v3.js" charset="utf-8"></script> <script> var para=d3.select("body") .selectAll("p") .text("你好"); para.style("color","red"); para.style("font-size","60px"); </script>
四、D3绘制直方图
1、添加直方图
var rect=svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("fill","DarkKhaki")
.attr("x",function(d,i){
return i*rectStep;
})
.attr("y",function(d,i){
return height-((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+100);
})
.attr("width",rectWidth)
.attr("height",function(d){
return ((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+80);
});
2、添加文字
var text=svg.selectAll(".textvalue")
.data(dataset)
.enter()
.append("text")
.attr("class",".textvalue")
.attr("fill","white")
.attr("font-size","12px")
.attr("text-anchor","middle")
.attr("x",function(d,i){
return i*rectStep;
})
.attr("y",function(d,i){
return height-((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+100);
})
.attr("dx",rectWidth/2)
.attr("dy","1em")
.text(function(d){
return d
});
3、添加更新DRAW（）
function draw(){
var updateRect=svg.selectAll("rect")
.data(dataset);
updateRect.attr("fill","DarkKhaki")
.attr("x",function(d,i){
return i*rectStep;
})
.attr("y",function(d,i){
return height-((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+100);
})
.attr("width",rectWidth)
.attr("height",function(d){
return ((d-mindata)*(scalemax-scalemin)/(maxdata-mindata)+80);
});
4、添加按钮
function mysort(){
dataset.sort(d3.ascending);
draw();
}
function myadd(){
dataset.push(Math.floor(Math.random()*4000));
draw();
}
<button type="button" onclick="mysort()">sort</button>
<button type="button" onclick="myadd()">append</button>
其余的操作读者可以自行练习
未完待续……
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
