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)