d3 - 系列教程 https://wiki.jikexueyuan.com/project/d3wiki
发布时间: 2021-05-06 11:29:00
Lesson1 select, selectAll, text 的基本用法
select: 选择第一个 ,
selectAll 选择所有
select("#my_div") 选择 id = .. 的div
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// 动态生成内容和插入样式
let p = d3.select('body').selectAll("p").text("I love banana!")
p.style('color', 'red').style('font-size', '30px')
</script>
</body>
</html>
Lesson2. data的用法：为某一组元素绑定一组数据
<html>
<body>
<div id='demo'>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
let dataset = ["apple", "banana", "orange"]
p = d3.select('#demo').selectAll('p')
p.data(dataset).text(function(d, i){
return `${d}, ${i} `
})
</script>
</body>
</html>
结果：
apple, 0 banana, 1 orange, 2 4
Lesson3 append, insert, delete node 插入追加和删除节点
d3.select("#demo").append("div").text("I am an appended div")
d3.select("#demo").insert("p", "#my_p").text("I am an inserted p before appended_div")
d3.select('#demo').remove()
Lesson 4 画个柱状图 enter(), attr(.., function(d,i) {})
let svg = d3.select("#demo").append('svg').attr("width", 400).attr('height', 500).style('border', '1px solid red')
let data = [1, 20, 35, 44, 3, 56 , 7]
let rect_height = 20
svg.selectAll('rect').data(data)
// 由于 svg 中间是个空的。所以 data > svg 的中间内容，所以这里用了enter.
.enter()
// 在svg 下面增加data个数的enter
.append('rect')
// 横坐标从哪里开始 20 , 从左到右
.attr('x', 20)
// 纵坐标从哪里开始， y 方向是从上到下. 参数d 来自于 data
.attr('y', function(d, i) { return i * rect_height })
// 图片宽度. 参数d 来自于 data
.attr('width', function(d) { return d })
// 每个柱子的高度。 看起来是每个横向柱子之间的距离
.attr('height', rect_height - 5)
// 添加的颜色
.attr('fill', 'red')
Lesson 5 比例尺 d3.min(), d3.max(), d3.scale.linear()
let min = d3.min(data)
let max = d3.max(data)
let linear = d3.scale.linear().domain([min, max])
.range([0, 300])
linear(1 ) // -> 0
linear(56) // -> 300
上面的线性的。
还有序数的的 ( ordinal )
使用的时候直接用 linear(xx) 就可以得到对应的长度了。
例如：
// 图片宽度. 参数d 来自于 data
.attr('width', function(d) { return linear(d) })
Lesson 7 坐标轴 d3.svg.axis() , call()
svg中，包含了 矩形，圆形，椭圆。。。还有： 路径( path )
svg 的<g> : 它的style会应用于下面的所有标签
let axis =d3.svg.axis()
.scale(linear)
.orient('bottom')
.ticks(3)
svg.append('g').call(axis)
call的使用方法：
object.call(axis)
等同于： axis(object)
<g class="axis" transform="translate(110,130)">
这里表示： 让axis 这个节点， left = 110, top =130. （用普通的position: relative 是不行的）
Lesson 8 一个柱状图实例
这里需要对 rectangle <rect> 标签有了解， width, height不变， x: y: 等同于 left, top 属性。 fill : 填满的颜色。stroke: 边框颜色
<html>
<body>
</body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
let width = 400
let height = 400
// 定义 SVG
let svg = d3.select('body').append('svg')
.attr('width', 400)
.attr('height', 400)
let padding = { left: 30, right: 30, top: 20, bottom: 20 }
// 定义数据
let data = [10, 20, 30 , 44 ,55 ,66, 3, 12]
let xScale = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeRoundBands([0, 400 - padding.left - padding.right])
let yScale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([400 - padding.top - padding.bottom, 0])
分别定义X周和Y轴坐标
let xAxis = d3.svg.axis().scale(xScale).orient('bottom')
let yAxis = d3.svg.axis().scale(yScale).orient('left')
let rectPadding = 4
// 这里开始画柱子
let rects = svg.selectAll('.MyRect')
.data(data)
.enter()
.append('rect')
.attr('class', 'MyRect')
.attr('style', 'stroke: red; fill: blue') // 画了柱子的颜色
.attr('transform', `translate(${padding.left}, ${padding.right})`)
.attr('x', function(d, index){
return xScale(index) + 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)
})
let texts = svg.selectAll('.MyText')
.data(data)
.enter()
.append('text')
.attr('class', 'MyText')
.attr('transform', `translate(${padding.left}, ${padding.right})`)
.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() {
return 20;
})
.text(function(d){
return d
})
svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(${padding.left}, ${400 - padding.bottom})`)
.call(xAxis)
svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(${padding.left}, ${padding.top})`)
.call(yAxis)
</script>
</html>
Lesson 9 动画 transition(), circle 属性
创建一个 circle: 左侧距离20， 顶部偏移（从上到下）10, 填充颜色：绿色
<circle cy=10 cx=20 r=15 style='fill:green' />
<html>
<body>
</body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
let svg = d3.select('body').append('svg')
.attr('width', 1400)
.attr('height', 1600)
//定义了一个圆形，
let circle_1 = svg.append('circle')
.attr('cx', 100)
.attr('cy', 100)
.attr('r', 45)
.style('fill', 'green')
// 3秒动画， 横坐标偏移 500px
circle_1.transition()
.duration(3000)
.attr('cx', 500)
.attr('r', 100)
.style('fill', 'red') // 颜色 -> 红色
.transition() // 开始第二段动画
.duration(2000) // 耗时2秒
.style('fill', 'blue') // 修改颜色
</script>
</html>
Lesson 10 update(), exit() , enter()
update: data 与目标节点的数量一致
enter: data > 目标节点数量
exit: data < 目标节点数量
Lesson 11 事件 event, onmouseover, onmouseout ...
下面的代码，是鼠标移动和移开某个circle的时候的事件
circle_1.on('mouseover', function(d, i){
d3.select(this)
.attr('fill', 'red')
})
circle_1.on('mouseout', function(d, i){
d3.select(this)
.attr('fill', 'blue')
})
Lesson 12 布局 Layout
布局带来的步骤稍微多了一点，但是非常有必要， 它： 将不适合绘图的数据进行了处理，现在更加方便绘图
D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。
12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。
后面的先不用看了
Back