Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active Jul 15, 2016
Embed
What would you like to do?
D3 v4 - barchart
license: gpl-3.0

D3.js ver.4 を使って作成したバーチャート

name value
hoge 100
hellow 312
world 222
fuga 254
<!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