基本绘制
柱形图基本绘制方法,注意enter
的使用,免去了事先写好rect
元素的麻烦
//设置画布
var width = 400
var height = 400
var svg = d3.select('body')
.append('svg')
.attr('width',width)
.attr('height',height)
//设置柱形图数据集
var dataset = [50,43,120,87,99,167,142]//柱形图数据集
//设置柱形图元素
var rectStep = 35
var rectWidth =30
var rect = svg.selectAll("rect")
.data(dataset)
.enter()//选中只有数据没有元素的部分
.append('rect')//由于没有元素所以要添加元素
.attr('fill','steelblue')//设置颜色
.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙
.attr('y',(d)=>height-d)//反转
.attr('width',rectWidth)
.attr('height',(d)=>d)
数据更新
分别对update
,enter
和exit
三个部分做处理
update
如果不做处理,则不会有新的排序,因为配对的没有改变,还是之前画好的
enter
不做改变,则不会增加,因为只增加了数据,没有对应的元素
<script>
//设置画布
var width = 400
var height = 400
var svg = d3.select('body')
.append('svg')
.attr('width',width)
.attr('height',height)
//设置柱形图数据集
var dataset = [50,43,120,87,99,167,142]//柱形图数据集
//设置柱形图元素
var rectStep = 35
var rectWidth =30
var rect = svg.selectAll("rect")
.data(dataset)
.enter()//选中只有数据没有元素的部分
.append('rect')//由于没有元素所以要添加元素
.attr('fill','steelblue')//设置颜色
.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙
.attr('y',(d)=>height-d)//反转
.attr('width',rectWidth)
.attr('height',(d)=>d)
</script>
<button type='button' onclick="mysort()">排序</button>
<button type='button' onclick="myadd()">增加</button>
<script>
function draw(){
var update = svg.selectAll('rect').data(dataset)
var enter = update.enter()
var exit = update.exit()
update.attr('fill','steelblue')//设置颜色
.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙
.attr('y',(d)=>height-d)//反转
.attr('width',rectWidth)
.attr('height',(d)=>d)
enter.append('rect')
.attr('fill','steelblue')//设置颜色
.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙
.attr('y',(d)=>height-d)//反转
.attr('width',rectWidth)
.attr('height',(d)=>d)
exit.remove()
}
function mysort(){
dataset.sort(d3.ascending)
draw()
}
function myadd(){
dataset.push(Math.floor(Math.random()*100))
draw()
}