d3 直式長條圖

d3 直式長條圖

by Shang-De You

JavaScript

var dataSet = [50, 43, 120, 87, 99, 167, 142]

var width = 400 // svg寬度
var height = 400 // svg寬度
var padding = { 
  top: 20,
  right: 20,
  bottom: 20,
  left: 20
} // 內距
var graphicHeight = height - padding.top - padding.bottom // 圖表高度為svg高度扣掉內距
var rectStep = 35 // 各別長條圖的距離
var rectWidth = 30 // 長條圖的寬度
var maxValue = 200 // 數值最大值

var svg = d3.select("body")
	.append("svg")
  .attr("width", width)
  .attr("height", height)

var rect = svg.selectAll("rect")
  .data(dataSet)
  .enter()
  .append("rect")
  .attr("fill", "steelblue")
  .attr("x", function(d,i){
      return padding.left + i * rectStep
  })
  .attr("y", function(d){
    return height - padding.bottom - graphicHeight * (d / maxValue) // 畫面高度扣掉長條圖高度作為繪製長條圖的起點
  })
  .attr("width", rectWidth)
  .attr("height", function(d){
    return graphicHeight * (d / maxValue) // 使用maxValue最大值作為畫面高度100%計算該筆資料佔畫面的百分比
  })
  
var text = svg.selectAll("text")
  .data(dataSet)
  .enter()
  .append("text")
  .attr("fill","white")
  .attr("font-size","14px")
  .attr("text-anchor","middle")
  .attr("x", function(d,i){
      return padding.left + i * rectStep
  })
  .attr("y", function(d){
      //return height - padding.bottom - d
    return height - padding.bottom - graphicHeight * (d / maxValue)
  })
  .attr("dx", rectWidth/2)
  .attr("dy", "1em")
  .text(function(d){
      return d
  })