D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
shimizu
Full window
Github gist
D3 v4 - barchart
D3.js ver.4 を使って作成したバーチャート
<!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>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js