- 测试型项目
- 结合vue,elementui,d3尝试进行数据展示
- 选择元素
d3.select()
d3.selectAll()
-
绑定数据
-
var str = "fribble" ;
var body = d3.select("body") ;
var p = body.selectAll("p") ;
p.datum(str) ;
p.text((d, i)=>{return "no" + i + "element is" + d}) -
var dataset = ["A", "B", "C"] ;
var body = d3.select("body") ;
var p = body.select("p") ;
p.data(dataset).text((d,i)=>d)
d代表绑定的data数据,i代表索引,从0开始
-
-
插入和删除元素
-
append(), insert()
-
remove()
-
-
画布,比例尺
- html中有两种画布:canvas和svg
- 线性比例尺
- 序数比例尺
linear()
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])
console.log(linear(0.9))
console.log(linear(2.3))
console.log(linear(3.3))
ordinal()
var index = [0, 1, 2]
var color = ['red', 'green', 'yellow']
var ordinal = d3.scale.ordianl().domain(index).range(color)
console.log(ordinal(0))
console.log(ordinal(2)) -
坐标轴
-
动效 transition
-
update(), enter(), exit()
-
添加交互.on()
- 先定义一个画布
- 定义x轴,y轴
- 开始画坐标轴
- 背景柱
- 主柱图
- 柱图上的数字
- 题目
定义坐标轴:scaleBand().rangeRound("屏幕上的数字").domain("真实世界的数字")
scaleLinear().rangeRound().domain().padding()