前回の散布図にラインを加えて線グラフを作ります。線を描くにはpath要素を使います。pathはある地点から地点を指定して描くことができますが、手作業で作るのはとても面倒なので、d3.svg.line()を使ってpathを生成します。
結果：
コード：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 軸の属性を決めている。特にfill:none;にしないと真っ黒になる。-->
<style>
.axis text {
font: 10px sans-serif;
}
.axis path {
/*
fillとopacityで半透明な背景色。
*/
fill: Aquamarine;
opacity: 0.1;
stroke: #000;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis line {
stroke: #000;
stroke-width: 1;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: DarkGreen;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var gdp = [
{年: 2007, gdp: 524, 増減: "up"},
{年: 2008, gdp: 518, 増減: "down"},
{年: 2009, gdp: 490, 増減: "down"},
{年: 2010, gdp: 512, 増減: "up"},
{年: 2011, gdp: 510, 増減: "down"},
{年: 2012, gdp: 517, 増減: "up"},
{年: 2013, gdp: 525, 増減: "up"}
];
var xScale = d3.scale.linear()
.domain([2007,2014])
.range([0,width]);
var yScale = d3.scale.linear()
.domain([480,530])
.range([height,0]);
var colorCategoryScale = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(6, -height)
.tickFormat(function(d){ return d+"年"; });
var yAxis = d3.svg.axis()
.ticks(5)
.scale(yScale)
.orient("left")
.tickSize(6, -width);
// lineの設定。
var line = d3.svg.line()
.x(function(d) { return xScale(d["年"]); })
.y(function(d) { return yScale(d["gdp"]); })
.interpolate("cardinal"); // 線の形を決める。
svg.selectAll("circle")
.data(gdp)
.enter()
.append("circle")
.attr("r",5)
.attr("fill", function(d){ return colorCategoryScale(d["増減"]); })
.attr("cx", function(d){ return xScale(d["年"]); })
.attr("cy", function(d){ return yScale(d["gdp"]); });
// line表示。
svg.append("path")
.datum(gdp)
.attr("class", "line")
.attr("d", line); // 上で作ったlineを入れて、ラインpathを作る。
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("y", -10)
.attr("x",10)
.style("text-anchor", "end")
.text("GDP(兆円)");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
</script>
</body>
</html>
解説：
前回作った散布図に加えて、線グラフを加えています。データと位置は同じですから、単純にライン用の
pathを作るd3.svg.line()を設定して、それを使ってpathを表示するだけです。
では具体的な手順です。
path生成のための設定をする
d3.svg.line()以下でラインpathを作る設定をします。
var line = d3.svg.line()
.x(function(d) { return xScale(d["年"]); })
.y(function(d) { return yScale(d["gdp"]); })
.interpolate("cardinal"); // 線の形を決める。
x()は各データごとのxの位置、y()はyの位置です。この場合はcircleと全く同じように、年をx、gdpをyの位置に使い、xScaleやyScaleで画面表示用にスケールを変えています。
interpolate()は線の形です。これがない場合は直線になります。cardinalでは結果で表示したような曲線になります。
何を入れるかで線の形を変えることができます。 linearなら直線、step-beforeやstep-afterなら階段上などがあります。
詳しくはリンク先を見てください：
SVG Paths and D3.js | DashingD3js.com
pathを表示する
svg.append("path")
.datum(gdp)
.attr("class", "line")
.attr("d", line); // 上で作ったlineを入れて、ラインpathを作る。
svgの中にpathを作った後、datum()でgdpのデータを読み込んでいます。
.attr(“d”,)でpathのデータを入れればpathが表示されますが、ここで先ほど作ったlineを入れます。
これだけで線が表示されます。
CSSのスタイルを整える
ついでですが、グラフの背景に色をつけています。
具体的には下のように、fillで塗りつぶして、opacity:0.1で円や線を見えるようにしています。
.axis path {
/*
fillとopacityで半透明な背景色。
*/
fill: Aquamarine;
opacity: 0.1;
stroke: #000;
stroke-width: 1;
shape-rendering: crispEdges;
}
さらに重要なことをひとつ。軸を作る時と同じように、ラインを作ったままだと黒く塗りつぶされて下のように真っ黒になることがあります。
こうならないためには下のように、ラインが持つクラスを指定して、fill: none;にする必要があります。
.line {
fill: none;
stroke: DarkGreen;
stroke-width: 1.5px;
}
実際の結果はリンク先で見れます：
6-1axis_linechart.html