D3.js ver.4 を使って作成したバーチャート
Last active
July 15, 2016 06:33
-
-
Save shimizu/5eb73aa907d64ee6e5f1d97b922c8801 to your computer and use it in GitHub Desktop.
D3 v4 - barchart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name | value | |
|---|---|---|
| hoge | 100 | |
| hellow | 312 | |
| world | 222 | |
| fuga | 254 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment