Skip to content

Instantly share code, notes, and snippets.

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

D3.js ver.4 で作成した円グラフ

name value
hoge 100
hellow 312
world 222
fuga 254
<!DOCTYPE html>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>D3 v4 - piechart</title>
#graph {
width: 900px;
height: 500px;
<div id="graph"></div>
<script src="//"></script>
"use strict"
var width,height
var chartWidth, chartHeight
var margin
var svg ="#graph").append("svg")
var chartLayer = svg.append("g").classed("chartLayer", true)
d3.csv("data.csv", cast, main)
function cast(d) {
d.value = +d.value
return d
function main(data) {
function setSize(data) {
width = document.querySelector("#graph").clientWidth
height = document.querySelector("#graph").clientHeight
margin = {top:40, left:0, bottom:40, right:0 }
chartWidth = width - (margin.left+margin.right)
chartHeight = height - (
svg.attr("width", width).attr("height", height)
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("transform", "translate("+[margin.left,]+")")
function drawChart(data) {
var arcs = d3.pie()
.value(function(d) { return d.value; })
var arc = d3.arc()
var pieG = chartLayer.selectAll("g")
.attr("transform", "translate("+[chartWidth/2, chartHeight/2]+")")
var block = pieG.selectAll(".arc")
var newBlock = block.enter().append("g").classed("arc", true)
.attr("d", arc)
.attr("id", function(d, i) { return "arc-" + i })
.attr("stroke", "gray")
.attr("fill", function(d,i){ return d3.interpolateCool(Math.random()) })
.attr("dx", 55)
.attr("dy", -5)
.attr("xlink:href", function(d, i) { return "#arc-" + i; })
.text(function(d) { console.log(d);return })
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment