D3 Examples - Bar chart (use scaleBand)

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <div id="bar-chart">
    <svg width="800" height="600">
      <g class="chart" transform="translate(40,40)">
        <g class="x-axis" transform="translate(0,400)"/>
        <g class="y-axis"/>
      </g>
    </svg>
  </div>
<script>
    var data = [
      {key:"data1", value:336},
      {key:"data2", value:98},
      {key:"data3", value:79},
      {key:"data4", value:60},
      {key:"data5", value:30}
    ];
    
    var yScale = d3.scaleLinear().domain([0,336]).range([400,0]);
    var xScale = d3.scaleBand()
    xScale.domain(d3.range(data.length)).rangeRound([0,60]).paddingInner(0.2)
    console.log(data.map(function(d){return d.key}))
    
    var xAxis = d3.axisBottom(xScale);
    d3.select(".x-axis").call(xAxis);
    var yAxis = d3.axisLeft(yScale);
    d3.select(".y-axis").call(yAxis);
    
    var chartHolder = d3.select("#bar-chart .chart");
    var bars = chartHolder.selectAll(".bar").data(data);
    
    bars = bars.enter().append('rect');
    bars
    .classed('bar', true)
    .attr('width', xScale.bandwidth())
    .attr('height', function(d){return 400 - yScale(d.value)})
    .attr('y', function(d){return yScale(d.value)})
    .attr('x', function(d,i){return xScale(i)});
    
    bars.exit().remove();
  </script>
  
</body>
​
    