shimizu · July 15, 2016 06:40
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <title>D3 v4 - linechart</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.scaleTime()
    var yScale = d3.scaleLinear()
    
    
    d3.csv("data.csv", cast,  main)
    
    //データの方変換
    function cast(d) {
        d.date = new Date(d.date) //dateオブジェクトに変換
        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:40, 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([new Date("2016/1/1"), new Date("2016/3/16")]).range([0, chartWidth])
        yScale.domain([500, 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 lineGen = d3.line()
            .x(function(d) { return xScale(d.date) })
            .y(function(d) { return yScale(d.value) })
            .curve(d3.curveStep)
            
        var line = chartLayer.selectAll(".line")
            .data([data])
            
        line.enter().append("path").classed("line", true)
            .merge(line)
            .attr("d", lineGen)
            .attr("fill", "none")
            .attr("stroke", "black")
            .attr("stroke-dasharray", function(d){ return this.getTotalLength() })
            .attr("stroke-dashoffset", function(d){ return this.getTotalLength() })
        
        chartLayer.selectAll(".line").transition(t)
            .attr("stroke-dashoffset", 0)
        
    }
    
    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+margin.top]+")")
            .call(xAxis);
        
    }
 }());
 </script>    
 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	date	value
	2016/1/1	1000
	2016/1/15	1300
	2016/1/31	1700
	2016/2/1	2000
	2016/2/2	1800
	2016/2/3	2100
	2016/3/1	1900
	2016/3/10	1600
	2016/3/20	2100
	2016/3/30	2000
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>D3 v4 - linechart</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.scaleTime()
	var yScale = d3.scaleLinear()


	d3.csv("data.csv", cast, main)

	//データの方変換
	function cast(d) {
	d.date = new Date(d.date) //dateオブジェクトに変換
	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:40, 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([new Date("2016/1/1"), new Date("2016/3/16")]).range([0, chartWidth])
	yScale.domain([500, 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 lineGen = d3.line()
	.x(function(d) { return xScale(d.date) })
	.y(function(d) { return yScale(d.value) })
	.curve(d3.curveStep)

	var line = chartLayer.selectAll(".line")
	.data([data])

	line.enter().append("path").classed("line", true)
	.merge(line)
	.attr("d", lineGen)
	.attr("fill", "none")
	.attr("stroke", "black")
	.attr("stroke-dasharray", function(d){ return this.getTotalLength() })
	.attr("stroke-dashoffset", function(d){ return this.getTotalLength() })

	chartLayer.selectAll(".line").transition(t)
	.attr("stroke-dashoffset", 0)

	}

	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+margin.top]+")")
	.call(xAxis);

	}
	}());
	</script>
	</body>
	</html>