d3 - 系列教程 https://wiki.jikexueyuan.com/project/d3wiki

访问量: 1095

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 个是由层级图扩展而来）。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。

后面的先不用看了

订阅/RSS Feed

Subscribe