D3:柱状图实现

//柱状数据
var data = [43,401,342,340,192,37,293,104];
var w = 40, //柱宽度
    len = data.length,
    height = 500,	//画布高度
    width = 600,  //画布宽度
    left = 50,
    bottom = 20;
//创建svg画布
var svg = d3.select('body')
    .append('svg')
    .attr('width',width)
    .attr('height',height)
    .style('margin-left','100px')
    .style('padding','20px')
    .style('border','1px solid green')
//绘制数据柱状
svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x',function(d,i){
        return left + w * i
    })
    .attr('y',function(d,i){
        return height - d - bottom;
    })
    .attr('width',w-5)
    .attr('height',function(d,i){
        return d
    })
    .attr('fill','steelblue')
//在柱头部标识数据
svg.selectAll('text')
    .data(data)
    .enter()
    .append('text')
    .attr('fill','white')
    .attr('text-anchor','middle')
    .attr('font-size','12px')
    .attr('x',function(d,i){
        return left +  w * i
    })
    .attr('y',function(d,i){
        return height - d - bottom;
    })
    .attr('dx',function(d,i){
        return w / 2
    })
    .attr('dy','1rem')
    .text(d => d)
//创建线性比例尺
var x = d3.scaleLinear().domain([0,len]).range([0,480]);
var y = d3.scaleLinear().domain([0,d3.max(data)]).range([600,0]);
//创建坐标轴
var axisX = d3.axisBottom().scale(x).ticks(len);
var axisY = d3.axisLeft().scale(y).ticks(len);
//绘制坐标轴
svg.append('g').attr('transform',`translate(${left},${height-bottom})`).call(axisX)
svg.append('g').attr('transform',`translate(${left},10)`).call(axisY)

　　

转载于:https://www.cnblogs.com/zhang134you/p/10572160.html