D3 BarChart

基本绘制

柱形图基本绘制方法,注意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()
        }