文章目录
安装和配置
安装d3js
在d3js的官网上可以直接下载d3js的文件,其中包含一个完整版和mini版,差别并不是很大。调试的时候可以使用完整版,发布的时候可以使用mini版,提高加载速度
本地服务器调试
可以利用python创建本地服务器进行调试,也可以安装Apache软件进行调试。使用python进行本地调试注意:
- python2.0 python -m SimpleHTTPServer 8888
- python3.0 python -m Http.server 8888
基本操作
数据
加载数据
- 加载csv数据,可以通过d3.csv(data,function) 进行操作
- 加载json数据,跟上面是一样的,只需要将csv改为json就行
d3.csv('winemag-data-130k-v2.csv',function(data) {
console.log(data)})
d3.json('winemag-data-130k-v2.json',function(data){
console.log(data)})
绑定数据
上述操作将数组的数据和段落进行绑定
将上述代码最后一段修改,可以将传入的数据输出
SVG
条形图
绘制SVG并将数据绑定到图形上
//Width and height
var w = 500;
var h = 50;
//Data
var dataset = [ 5, 10, 15, 20, 25 ];
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 50);
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
.attr("cy", h/2)
.attr("r", function(d) {
return d;
});
绘制条形图,并且根据数组的大小和长度调整柱形图的宽度
//Width and heightvar
w = 500;var h = 100;var dataset = [];
//Initialize empty array
for (var i = 0; i < 25; i++) {
//Loop 25 times var newNumber = Math.random() * 20; //New random number (0-30)
dataset.push(newNumber); //Add new number to array}
/Create SVG elementvar
svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 100)
var bar = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr('x',0)
.attr('y',0)
.attr('height',50)
.attr('width',20)
bar.attr("x", function(d, i) {
return (i *(w/dataset.length))
})
.attr('y',function(d) {
return h-d*4
})
.attr('width',function(d){
return w/dataset.length-2
})
.attr("height", function(d) {
return d*4; });
//加标签
svg.selectAll('text').data(dataset)
.enter()
.append('text')
.text(function(d) {
return d })
.attr("x", function(d,i) {
return i* (w/dataset.length)+2})
.attr("y",function(d) {
return h-(d*4)+10})
.attr('font-family','sans-serif')
.attr('font-size','11px') .attr('fill','white')
散点图
散点图的画法实际上与前面的是一致的,只是需要更改的是circle和设置x,y以及半径
var dataset_2 = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ];
var svg2=d3.selectAll('body').append('svg')
.attr("height",h)
.attr("width",w)
svg2.selectAll('circle').data(dataset_2)
.enter().append('circle')
.attr("cx", function(d) {
return d[0]})
.attr("cy", function(d) {
return d[1]})
.attr('r',function(d){
return Math.sqrt(h-d[1])})
svg2.selectAll('text').data(dataset_2).enter().append('text').text(function(d) {
return d[0]+','+d[1]})
.attr('x',function(d){
return d[0]+3}) .attr('y',function(d) {
return d[1]+3}) .attr('font_size','2px')
定义坐标轴
d3中的call函数会取得代码链中传递过来的元素,然后再把它交给其他函数(括号里面的函数)
//Width and height
ar w = 500;
var h = 300;
var padding = 20
;var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150] ];
//Create scale functions
var xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) {
return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) {
return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) {
return d[1]; })])
.range([2, 5]);//Define X axis
var xAxis = d3.axisBottom() .scale(xScale)
.ticks(5);
var yAxis = d3.axisLeft() .scale(yScale)
.ticks(5);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]); }) .attr("cy", function(d) {
return yScale(d[1]); }) .attr("r", function(d) {
return rScale(d[1]); });
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1]; }) .attr("x", function(d) {
return xScale(d[0]); })
.attr("y", function(d) {
return yScale(d[1]); }) .attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red")
;//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate("+padding+ ",0)")
.call(yAxis);
更新视图
对于视图的更新书中所讲的是d3.v3的使用,v5的版本貌似对此有过更改,此代码只能更新数据,但是更新过程中缺少动画效果。
对于常见的更新数据主要有以下常规步骤
- 设置图像基本信息
- 生成初始数据
- 生成比例尺
- 生成坐标轴
- 生成绘图元素(圆或者矩阵和标签
- 设置监听器或者定时器
- 将获取数据和设置比例尺,标签部分重写一遍
//Width and height
var w = 1000;
var h = 300;
var padding = 20;
// 生成随机数
valueNum=100
var dataset=[]
for (var i=0;i < 100;i++){
var num=Math.floor(Math.random()*100)
dataset.push(num)
}
// 生成比例尺
var xScale=d3.scaleOrdinal().domain(d3.range(dataset.length))
.range([0,w],0.05)
var yScale=d3.scaleLinear().domain([0,d3.max(dataset)])
.range([h-padding,padding])
//生成坐标轴
var xAxis=d3.axisBottom().scale(xScale).ticks(5)
var yAxis=d3.axisLeft().scale(yScale).ticks(5)
//生成svg
var svg=d3.select('body').append('svg').attr('width',w).attr('height',h)
//生成柱形图并绑定数据
svg.selectAll('rect').data(dataset).enter().append('rect')
.attr('x',function(d,i){
return xScale.domain()[i]*10})
.attr('y',function(d) {
return h-yScale(d)})
.attr('width',10)
.attr('height',function(d){
return yScale(d)})
.attr('fill','black')
//生成标签
svg.selectAll('text').data(dataset).enter().append('text').text(function(d){
return d})
.attr('x',function(d,i) {
return xScale.domain()[i]*10+2})
.attr('y',function(d) {
return h-yScale(d)+14})
.attr('font-size','8px')
.attr('font-family','san-serif')
.attr('fill','red')
// 设置监听
d3.select('p').on('click', function(){
// 生成随机数
var valueNum=100
var dataset=[]
for (var i=0;i<100;i++){
var num=Math.floor(Math.random()*100)
dataset.push(num)}
//更新比例尺
var xScale=d3.scaleOrdinal().domain(d3.range(dataset.length))
.range([0,w],0.05)
var yScale=d3.scaleLinear().domain([0,d3.max(dataset)])
.range([h-padding,padding])
// 更新数据
svg.selectAll('rect').data(dataset).transition().duration(1000)
.each(function(d,i){
d3.select(this)
.attr('x',xScale.domain()[i]*10)
.attr('y',h-yScale(d))
.attr('width',10)
.attr('height',yScale(d))
.attr('fill','black')
})
svg.selectAll('text').data(dataset).enter().append('text').text(function(d){
return d})
.attr('x',function(d,i) {
return xScal