1
学習機能していない。ここ
トランジションがトランジションを除きD3すべてのものであるワーキングファインを使用してGDP棒グラフを作成するには
/*
define margin followed by height & width for svg
*/
//define margin
var margin = {
top:20,right:10,bottom:100,left:40
}
//define w & h
var w = 700 - margin.left - margin.right;
var h = 500 - margin.top - margin.bottom;
/*
define svg by selecting the body and append the svg to body with proper
height and width then appen it to g
*/
var svg = d3.select("body").
append("svg").
attr({
"width": w + margin.left + margin.right,
"height": h + margin.top + margin.bottom
}).
append("g").
attr("transform", "translate(" + margin.left + "," + margin.right + ")");
/*
define scale then followed by axis
*/
//define x & y scale
var xScale = d3.scale.ordinal().
rangeRoundBands([0, w], 0.2, 0.2);
var yScale = d3.scale.linear().
range([h, 0]);
//define x & y axis
var xAxis = d3.svg.axis().
scale(xScale).
orient("bottom");
var yAxis = d3.svg.axis().
scale(yScale).
orient("left");
/*
import the data here we have csv data
*/
d3.csv("data.csv", function (error, data) {
if (error) console.log("Error:Data Is Not Loaded");
data.forEach(function (d) {
d.country = d.country;
d.gdp = +d.gdp;
console.log(d.gdp);
});
//sorting data
data.sort(function (a, b) {
return (b.gdp - a.gdp);
});
//specify domains of x & y scale
xScale.domain(data.map(function (d) { return d.country }));
yScale.domain([0, d3.max(data, function (d) { return d.gdp })]);
//draw bars or bind data
var rects = svg.selectAll("rect").
data(data);
//enter data
rects.enter().
append("rect");
//transition
rects.
attr("height", 0).
attr("y", h).
transition().duration(3000).
delay(function (d, i) {
return i * 200;
});
//update data
rects.attr({
"x": function (d) { return xScale(d.country); },
"y": function (d) { return yScale(d.gdp); },
"width": xScale.rangeBand(),
"height": function (d) { return h - yScale(d.gdp) }
});
//exit data
rects.
exit().
remove();
//label the bar
svg.selectAll("text").
data(data).
enter().
append("text").
text(function (d) {
return (d.gdp);
}).
attr({
"x": function (d) { return xScale(d.country) + xScale.rangeBand()/2 },
"y": function (d) { return yScale(d.gdp) + 12; }
}).
style({
"fill": "white",
"text-anchor":"middle"
});
//draw the xAxis
svg.append("g").
attr("class", "x axis").
attr("transform", "translate(0," + h + ")").
call(xAxis).
selectAll("text").
attr("transform", "rotate(-60)").
attr({
"dx": "-.8em",
"dy": ".25em"
}).
style("text-anchor", "end").
style("font-size", "12px");
//draw the yAxis
svg.append("g").
attr("class", "y axis").
call(yAxis).
style("font-size","12px");
});svg {
margin-left: auto;
margin-right: auto;
display: block;
}
.axis path,.axis line {
fill:none;
stroke:#000;
shape-rendering:crispEdges;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}<!DOCTYPE html>
<html>
<head>
<title>D3 Tutorial Demo</title>
<meta charset="utf-8" />
<link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/d3/d3.min.js"></script>
<link href="demo.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid text-center">
<h1>Bar Graph - 2015 GDP Based On PPP Valuation</h1>
</div>
<script src="../Scripts/jquery-2.2.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="demo.js"></script>
</body>
</html>country,gdp
Brazil,3.20
Italy,2.17
India,8.02
Saudi Arebia,1.13
Russa,3.47
Italy,2.17
Australia,1.13
Spain,1.68
Korea,1.84
United States,17.9
China,19.51
Japan,4.84
Germany,3.84
Turkey,1.57
United Kingdom,2.66はここでいずれかが事前になぜ移行が動作しない感謝を指摘することができ
https://gist.github.com/cannelflow/478328a4cb21afc4de44 – user5323957