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)