D3 v4 - barchart by shimizu

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>D3 v4 barChart</title>
<style>
#graph {
    width: 900px;
    height: 500px;
}
.tick line {
    stroke-dasharray: 2 2 ;
    stroke: #ccc;
}
</style>
</head>

<body>
<div id="graph"></div>    
    
    
    
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>    
<script>
!(function(){
    "use strict"
    
    var width,height
    var chartWidth, chartHeight
    var margin
    var svg = d3.select("#graph").append("svg")
    var axisLayer = svg.append("g").classed("axisLayer", true)
    var chartLayer = svg.append("g").classed("chartLayer", true)
    
    var xScale = d3.scaleBand()
    var yScale = d3.scaleLinear()
    
    d3.csv("data.csv", cast,  main)
    
    function cast(d) {
        d.value = +d.value
        return d 
    }
    
    function main(data) {
        setSize(data)
        drawAxis()
        drawChart(data)    
    }
    
    function setSize(data) {
        width = document.querySelector("#graph").clientWidth
        height = document.querySelector("#graph").clientHeight
    
        margin = {top:0, left:100, bottom:40, right:0 }
        
        
        chartWidth = width - (margin.left+margin.right)
        chartHeight = height - (margin.top+margin.bottom)
        
        svg.attr("width", width).attr("height", height)
        
        axisLayer.attr("width", width).attr("height", height)
        
        chartLayer
            .attr("width", chartWidth)
            .attr("height", chartHeight)
            .attr("transform", "translate("+[margin.left, margin.top]+")")
            
            
        xScale.domain(data.map(function(d){ return d.name })).range([0, chartWidth])
            .paddingInner(0.1) //バー間のパディング
            .paddingOuter(0.5) //x軸両端のパディング
            
        yScale.domain([0, d3.max(data, function(d){ return d.value})]).range([chartHeight, 0])
            
    }
    
    function drawChart(data) {
        //トランジションオブジェクトを生成
        var t = d3.transition()
            .duration(1000)
            .ease(d3.easeLinear)
            //トランジションイベント
            .on("start", function(d){ console.log("transiton start") }) //トランジション開始時
            .on("end", function(d){ console.log("transiton end") }) //トランジション終了時
        
        var bar = chartLayer.selectAll(".bar").data(data)
        
        bar.exit().remove()
        
        bar.enter().append("rect").classed("bar", true)
            .merge(bar) //選択済みセレクションをenterで追加されるセレクションにマージする
            .attr("fill", "blue")
            .attr("width", xScale.bandwidth())
            .attr("height", 0)
            .attr("transform", function(d){ return "translate("+[xScale(d.name), chartHeight]+")"})
            
        //アニメーション
        chartLayer.selectAll(".bar").transition(t)
            .attr("height", function(d){ return chartHeight - yScale(d.value) })
            .attr("transform", function(d){ return "translate("+[xScale(d.name), yScale(d.value)]+")"})
    }
    
    function drawAxis(){
        var yAxis = d3.axisLeft(yScale)
            .tickSizeInner(-chartWidth)
        
        axisLayer.append("g")
            .attr("transform", "translate("+[margin.left, margin.top]+")")
            .attr("class", "axis y")
            .call(yAxis);
            
        var xAxis = d3.axisBottom(xScale)
    
        axisLayer.append("g")
            .attr("class", "axis x")
            .attr("transform", "translate("+[margin.left, chartHeight]+")")
            .call(xAxis);
        
    }    
    
}());   
</script>    
</body>
</html>

data.csv

name,value
hoge,100
hellow, 312
world, 222
fuga, 254