下载d3.js文件：https://d3js.org/d3.v5.min.js
- 柱形图
- 折线图
- 散点图
- 饼图
- 力导图
一、动态效果柱形图
效果图：
代码：
<html><head>
<meta charset="utf-8">
<title>带有交互的柱形图</title>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.MyText {
fill: red;
text-anchor: middle;
}
</style>
<script src="d3.v3.min.js"></script>
</head>
<body>
<script>
//画布大小
var width = 400;
var height = 400;
//在 body 里添加一个 SVG 画布
var svg = d3.select("body")//选择d3文档中的body元素
.append("svg")
.attr("width", width)
.attr("height", height);
//画布周边的空白
var padding = {left:30, right:30, top:20, bottom:20};
//定义一个数组
var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
//x轴的比例尺
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length)) //有几个矩形就有几个x刻度
.rangeRoundBands([0, width - padding.left - padding.right]);
//y轴的比例尺
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
//定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//矩形之间的空白
var rectPadding = 4;
//添加矩形元素
var rect = svg.selectAll(".MyRect")//选择svg中MyRect类中的所有元素
.data(dataset)
.enter()
.append("rect")//添加矩形元素
.attr("class","MyRect")//清除里面的所有类，并设为自己的类myrect
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){//矩形左上角的x坐标
return xScale(i) + rectPadding/2;
} )
.attr("width", xScale.rangeBand() - rectPadding )//矩形的宽
.attr("y",function(d){//变化前的矩形左上角的y坐标
var min = yScale.domain()[0];
return yScale(min);
})
.attr("height", function(d){//变化前的矩形左上角的高
return 0;
})
.transition()//过度
.delay(function(d,i){//延迟
return i * 200;
})
.duration(2000)//变化时长
.ease("bounce")//到终点是弹跳
.attr("y",function(d){//矩形左上角的y坐标
return yScale(d);
})
.attr("height", function(d){//矩形的高
return height - padding.top - padding.bottom - yScale(d);
});
//坐标说明位置，宽高说明大小
var rects = svg.selectAll(".Myrect")//选择svg中的MyRect类中的所有元素
.attr("fill","steelblue") //填充颜色不要写在CSS里
.on("mouseover",function(d,i){//鼠标在上，颜色变黄
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){//鼠标移出，颜色变钢铁蓝
d3.select(this)
.transition()//500毫秒渐变
.duration(500)
.attr("fill","steelblue");
});
//添加文字元素
var texts = svg.selectAll(".MyText")//选择svg中的MyText类中的所有元素
.data(dataset)
.enter()
.append("text")//添加text元素
.attr("class","MyText")//清除里面的所有类，并设为自己的类MyText
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){//矩形左上角的x坐标
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){//矩形左上角的y坐标
return yScale(d);
})
.attr("dx",function(){//text相对于矩形的横向偏移量
return (xScale.rangeBand() - rectPadding)/2;
})
.attr("dy",function(d){//text相对于矩形的纵向偏移量
return 20;
})
.text(function(d){//text 的内容
return d;
})
.attr("y",function(d){//变化前y的坐标
var min = yScale.domain()[0];
return yScale(min);
})
.transition()//过渡
.delay(function(d,i){
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y",function(d){//变化后的y坐标
return yScale(d);
});
//添加x轴,分组元素<g>
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
//添加y轴,分组元素<g>
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
</script>
</body>
</html>
二、折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折线图</title>
<script src="d3.min.js"></script>
</head>
<style type="text/css">
.axis path,
.axis line{
fill:none;
stroke:black;
shape-rendering:crispEdges; /*线是光滑的*/
}
</style>
<body>
<script>
//定义画布的长和宽
var width = 600;
var height = 600;
//定义画布
var svg=d3.select("body")
.append("svg")//添加画布
.attr("width",width)
.attr("height",height);
//留白
var padding={left:50,right:50,top:50,bottom:50};
//数据
var database= [{
country:"china",
gdp:[[1,2],[2,4],[3,5],[4,5],[5,5],[6,5],[7,9],[8,5]]
},
{
country:"japan",
gdp:[[1,3],[2,3],[3,7],[4,5],[5,9],[6,2],[7,4],[8,7]]
}
];
var xScale = d3.scale.linear()
.domain([1,8])
.range([0,width-padding.left-padding.right]);
var yScale = d3.scale.linear()
.domain([0,10])
.range([height-padding.top-padding.bottom,0]);
//x轴
var xAxis=d3.svg.axis().scale(xScale).ticks(5).tickFormat(d3.format("d")).orient("bottom");
var yAxis=d3.svg.axis().scale(yScale).orient("left");
var gdpmax=0;
for(var i=0;i<database.length;i++){
var currGdp = d3.max(database[i].gdp,function(d){
return d[1];
});
if(currGdp>gdpmax)
gdpmax = currGdp;
}
var linePath = d3.svg.line()
.x(function(d){return xScale(d[0]);})
.y(function(d){return yScale(d[1]);});
var colors = [d3.rgb(0,0,255),d3.rgb(0,255,0)];
svg.selectAll("path")
.data(database)
.enter()
.append("path")
.attr("transform","translate(" +padding.left +","+padding.top +")")
.attr("d",function(d){
return linePath(d.gdp);
})
.attr("fill","none")
.attr("stroke-width",3)
.attr("stroke",function(d,i){
return colors[i];
});
svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.right+","+(height-padding.bottom)+")")
.call(xAxis);
svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.left+","+padding.top+")")
.call(yAxis);
</script>
</body>
</html>
三、散点图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>散点图</title>
<script src="d3.min.js"></script>
</head>
<style type="text/css">
.axis path,
.axis line{
fill:none;
stroke:black;
shape-rendering:crispEdges; /*线是光滑的*/
}
</style>
<body>
<script>
//定义画布的长和宽
var width = 500;
var height = 400;
var xAxisWidth = 400;
var yAxisWidth = 400;
//定义画布
var svg=d3.select("body")
.append("svg")//添加画布
.attr("width",width)
.attr("height",height);
//留白
var padding={left:30,right:30,top:30,bottom:20};
//数据
var database= [[5,2],[1,4],[1,5],[2,5],[3,5],[7,5],[8,9],[7,5]];
var xScale = d3.scale.linear()
.domain([0,1.2*d3.max(database,function(d){
return d[0];
})])
.range([0,xAxisWidth]);
var yScale = d3.scale.linear()
.domain([0,1.2*d3.max(database,function(d){
return d[1];
})])
.range([yAxisWidth,0]);
//x轴
var xAxis=d3.svg.axis().scale(xScale).orient("bottom");
var yAxis=d3.svg.axis().scale(yScale).orient("left");
var circle = svg.selectAll("circle")
.data(database)
.enter()
.append("circle")
.attr("fill","black")
.attr("cx",function(d){
return padding.left+xScale(d[0]);
})
.attr("cy",function(d){
return height-padding.bottom-yScale(d[1]);
})
.attr("r",5);
svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.right+","+(height-padding.bottom)+")")
.call(xAxis);
svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.left+","+padding.top+")")
.call(yAxis);
</script>
</body>
</html>
四、饼图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图</title>
<script src="d3.v3.min.js"></script>
</head>
<body>
<!--D3批量数据绑定，Path到Arc到Pie，原生数据饼图绘制-->
<script>
//获得用户屏幕的宽和高
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
w=w*0.98;
h=h*0.98;
var svg =d3.select("body")
.append("svg")
.attr("width",w)//svg的宽度
.attr("height",h);//svg的高度
var dataset =[["农业",90],["工业",200],["第三产业",400]];//
var pie=d3.layout.pie()
.value(function(d){return d[1];});
var piedata=pie(dataset);//计算数组的第二个元素，例90
console.log(piedata);
console.log(dataset);
var arc=d3.svg.arc()//arc()函数在d3.v3版本下
.innerRadius(100)//内半径
.outerRadius(300);//外半径
svg.selectAll("path")
.data(piedata)
.enter()
.append("path")
.attr("d",function(d){//一个数组的函数的d
console.log(arc(d));//在conctrl打印出每个弧度转换成参数
return arc(d)
})
.attr("fill","yellow")//图形颜色
.attr("stroke","blue")//文字颜色
// .attr("transform","translate(400,400)")//圆心平移到（400，400）
.attr("transform","translate("+w/2+","+h/2+")")//圆心平移到（400，400）
.on("mouseover",function(d){//鼠标移上去时
d3.select(this)//选择当前函数
.attr("fill","green");
})
.on("mouseout",function(d){//鼠标移出去时
d3.select(this)
.attr("fill","yellow");
});
svg.selectAll("text")
.data(piedata)
.enter()
.append("text")
.attr("fill","blue")
.attr("text-anchor","middle")//文字的重心与图形的重心重合
.attr("transform",function(d){
var x=arc.centroid(d)[0];//不规则的图形的重心，把d传进去才能取得。
var y=arc.centroid(d)[1];
return "translate("+(w/2+x)+","+(h/2+y)+")";
})
.text(function (d) {
return d.value
});
</script>
</body>
</html>
五、力导图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="d3.v3.min.js"></script>
<script>
//获得用户屏幕的宽和高
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
w=w*0.98;
h=h*0.98;
var color =d3.scale.category10();
var force = d3.layout.force()//定义力导向
.charge(-120)//电荷
.linkDistance(100)//距离
.size([w,h]);
var svg =d3.select("body")//定义d3画布
.append("svg")
.attr("width",w)//svg的宽度
.attr("height",h);//svg的高度
d3.json("a.json",function(error,graph){//把json文件读成graph
console.log(graph);//查看是否读成功
force.nodes(graph.nodes)//点
.links(graph.links)//边
.start();
var node =svg.selectAll(".node")
.data(graph.nodes)
.enter()//进入每个元素
.append("circle")//定义为圆
.attr("class","node")
.attr("r",16)
.attr("cx",100)//圆心的坐标
.attr("cy",100)
.style("fill","blue")
.call(force.drag);//可拖拽
var link =svg.selectAll(".link")
.data(graph.links)
.enter()
.append("line")
.attr("class","link")
.style("stroke-width",1)//变宽
.style("stroke","red");
force.on("tick",function () {//start.tick.end刷新方式
node.attr("cx",function (d) {return d.x;})
.attr("cy",function (d) {return d.y;});
link.attr("x1",function (d) {return d.source.x;})
.attr("y1",function (d) {return d.source.y;})
.attr("x2",function (d) {return d.target.x;})
.attr("y2",function (d) {return d.target.y;});
})
})
</script>
</body>
</html>
