D3 Examples - Responsive Bar

xxxxxxxxxx
 
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Line Chart</title>
<style>
  
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
​
var data = [
      {period: "a", value: 1},
      {period: "b", value: 3},
      {period: "c", value: 2},
      {period: "d", value: 5},
      {period: "e", value: 4},
      {period: "f", value: 3}
    ]
​
var margin = {top: 20, right: 20, bottom: 30, left: 25},
    width = 600 - 30 - margin.left - margin.right,
    height = 320 - margin.top - margin.bottom;
​
var x = d3.scaleBand().rangeRound([0, width]).padding(0.5);
var y = d3.scaleLinear().range([height, 0]);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y).tickSize(-width).ticks(5)
​
var svg = d3.select("body").select("svg").length ? d3.select("body").select("svg") : d3.select("body").append("svg");
  
  svg
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
var container = svg.select("g");
var xAxisComponent = svg.select(".x.axis");
var yAxisComponent = svg.select(".y.axis");
​
x.domain(data.map(function(d) { return d.period; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
y.nice(y.ticks().length);
​
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
​
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
​
var bars = svg.selectAll(".bar");
​
bars
  .data(data)
.enter().append("rect")
  .attr("class", "bar")
  .attr("fill", "#BEBEC0")
  .attr("x", function(d) { return x(d.period); })
  .attr("width", x.bandwidth())
  .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); });
  
function update() {
  updateScales();
  updateAxes();
  updateBars();
}
​
function updateScales() {
  var width = d3.min([W.getViewportWidth(), maxWidth]) - rightPadding;
  x.rangeBands([0, width], 0.04);
}
​
function updateAxes() {
  xAxis.transition().call(xAxisComponent);
}
​
function updateBars() {
  var u = barGroup
    .selectAll('rect')
    .data(data);
​
  u.enter()
    .append('rect');
​
  u.exit()
    .remove();
​
  u.transition()
    .attr('x', function(d, i) {return xScale(intToChar(i));})
    .attr('width', xScale.rangeBand())
    .attr('y', function(d) {return yScale(d);})
    .attr('height', function(d) {return yScale(0) - yScale(d);});
}
​
​
</script>
</body>
</html>
    