//柱状数据
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)
