D3js官网：https://d3js.org/
最近在研究D3js，索性总结一些文档出来，来总结一周以来的学习心得。
D3js官网全英文，相对于Echarts官网详细的文档，英文不好的同学，学起来可能要费劲些，不过有伙伴有中文翻译版的，附上链接：https://github.com/d3/d3/wiki/CN-Home
D3Js是什么
D3.js 是基于数据驱动文档工作方式的一款JavaScript函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一，它被很多其他的表格插件所使用。D3使你有能力借助HTML，SVG和CSS来生动地可视化各种数据。D3不需要你使用某个特定的框架，它的重点在于对现代主流浏览器的兼容，同时结合了强大的可视化组件，以数据驱动的方式去操作DOM。
浏览器支持
D3js和ECharts一样都是实现数据可视化的JS库，比较D3js和ECharts
- D3支持的主流浏览器不包括IE8及以前的版本。D3测试了Firefox、Chrome、Safari、Opera和IE9。D3的大部分组件可以在旧的浏览器运行。
- ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
安装
常用的引入方式：
- script标签引入
<script src="http://d3js.org/d3.v3.min.js"></script>
- npm命令安装
npm install d3
由于D3版本v5和v4/v3存在较大的变动，本篇文章主要以v3为主，依次由浅入深的聊一聊d3js的具体使用。
D3如何用
api官网 https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C
简单了解下，以下的demo要用到：
选择器
<body>
<p>Hello World!</p>
<p>Hello World!</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var p = d3.select('body')
.selectAll('p')
.text('你好！')
p.style("color", "red")
.style("font-size", "72px")
</script>
</body>
d3提供了丰富的dom操作，有点类似于jQuery的用法。
d3.select() 选择的是符合条件的第一个元素，它指定的为一个元素；
括号里面可以写标签、也可以写class名，id名，这点与jQuery神似
d3.select('body') //指定body标签内
或
d3.select('.red') //指定标签class名为red的第一个标签
或
d3.select('#blue') //指定标签ID名为blue的第一个标签
d3.selectAll('p') 选择的是所有p标签的元素，它指定的为一个集合；
.text('你好') 指定文档内容 content
p.style() 就是对p元素定义css样式
整个代码执行下来 结果就是两行红色字体的 你好！
d3的很多写法都类似于jQuery，并不那么陌生。
datum
<body>
<p>Hello World!</p>
<p>Hello World!</p>
<script src="../js/d3.v3.js"></script>
<script>
var str = "china"
var body = d3.select('body')
var p = body.selectAll('p')
p.datum(str);
p.text(function(d, i) {
return "第" + i + "个元素绑定的数据是" + d
})
</script>
</body>
数据可视化的源泉在哪？dataset是数据源；
- selection.datum - 取得或设置单个元素的数据，不必计算连接。
p.datum() //p标签的元素设置为str这个外部源
p.text() // 括号里接收一个函数回调，d就是str的值， i是索引
最后输出的结果：
第0个元素绑定的数据是china
第1个元素绑定的数据是china
data
<body>
<p>Hello World!</p>
<p>Hello World!</p>
<script src="../js/d3.v3.js"></script>
<script>
var dataset = ["I like dogs","I like cats","I like snakes"];
var body = d3.select('body')
var p = body.selectAll('p')
p.data(dataset);
p.text(function(d, i) {
return d
})
</script>
</body>
-
selection.data - 在计算相关的连接时，取得或设置一组元素的数据。
数据源有3个，而p标签仅有两个元素，所以输出到页面的结果为：
I like dogs
I like cats
svg
<script>
var width = 400;
var height = 400;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
</script>
append 添加svg标签
attr svg设定宽高
柱状图
<script>
var dataset = [ 250 , 210 , 170 , 130 , 90 ]; //数据（表示矩形的宽度）
var width = 400;
var height = 400;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
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 d;
})
.attr("height", rectHeight-2)
.attr("fill", "steelblue");
</script>
运行结果：
image.png
这里面注意到
.enter() 作用是在为缺失的元素返回占位符
线性比例尺
<script>
// 线性比例尺
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])
linear(0.9)
console.log(linear(2.3)) // 175
</script>
d3.min() 返回最小值
d3.max() 返回最大值
d3.scale.linear() 构建一个线性比例尺
.domain() 取得或设置比例尺的定义域
.range() 取得或设置比例尺的输出范围
序数比例尺
<script>
// 序数比例尺
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
var ordinal = d3.scale.ordinal() // 构造一个序数比例尺
.domain(index) // 获取或指定比例尺的输入域
.range(color); // 获取或指定比例尺的输出范围
console.log(ordinal(2)) // 175
</script>
线性比例尺的柱状图
<script>
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 = d3.select("body")
.append('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");
</script>
带x轴的柱状图
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<script>
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 = d3.select("body")
.append('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");
</script>
输出结果为：
image.png
带xy轴的柱状图
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.MyRect {
fill: steelblue;
}
.MyText {
fill: white;
text-anchor: middle;
}
</style>
<script>
//画布大小
var width = 400;
var height = 400;
//在 body 里添加一个 SVG 画布
var svg = d3.select("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))
.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 rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("width", xScale.rangeBand() - rectPadding )
.attr("height", function(d){
return height - padding.top - padding.bottom - yScale(d);
});
//添加文字元素
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("dx",function(){
return (xScale.rangeBand() - rectPadding)/2;
})
.attr("dy",function(d){
return 20;
})
.text(function(d){
return d;
});
//添加x轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
//添加y轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
</script>
image.png
带动画效果的柱状图
<script>
//画布大小
var width = 400;
var height = 400;
//在 body 里添加一个 SVG 画布
var svg = d3.select("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))
.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 rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("width", xScale.rangeBand() - rectPadding)
.attr("y",function(d){
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){
return yScale(d);
})
.attr("height", function(d){
return height - padding.top - padding.bottom - yScale(d);
})
//添加文字元素
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("dx",function(){
return (xScale.rangeBand() - rectPadding)/2;
})
.attr("dy",function(d){
return 20;
})
.text(function(d){
return d;
})
.attr("y",function(d){
var min = yScale.domain()[0];
return yScale(min);
})
.transition()
.delay(function(d,i){
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y",function(d){
return yScale(d);
});
//添加x轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
//添加y轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
</script>
