test10.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://d3js.org/d3.v4.js"></script> </head> <body> <svg width="960" height="500"></svg> </body> <!-- 上記のsvg要素をJavaScript内で読み込むので、bodyより下にスクリプトのソースを定義する --> <script src="./test10.js"></script> </html>test10.js
var svg = d3.select("svg"), margin = {top: 20, right: 80, bottom: 30, left: 50}, width = svg.attr("width") - margin.left - margin.right, height = svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // データ var tokyo = [ {"month": 1, "temperature": 5.1}, {"month": 2, "temperature": 7.0}, {"month": 3, "temperature": 8.1}, {"month": 4, "temperature": 14.5}, {"month": 5, "temperature": 18.5}, {"month": 6, "temperature": 22.8}, {"month": 7, "temperature": 27.3}, {"month": 8, "temperature": 27.5}, {"month": 9, "temperature": 25.1}, {"month": 10, "temperature": 19.5}, {"month": 11, "temperature": 14.9}, {"month": 12, "temperature": 7.5}, ]; var osaka = [ {"month": 1, "temperature": 4.4}, {"month": 2, "temperature": 7.4}, {"month": 3, "temperature": 8.1}, {"month": 4, "temperature": 13.8}, {"month": 5, "temperature": 19.6}, {"month": 6, "temperature": 24.2}, {"month": 7, "temperature": 27.8}, {"month": 8, "temperature": 28.9}, {"month": 9, "temperature": 25.2}, {"month": 10, "temperature": 19.5}, {"month": 11, "temperature": 15.2}, {"month": 12, "temperature": 8.1} ]; var sapporo = [ {"month": 1, "temperature": -3.8}, {"month": 2, "temperature": -1.1}, {"month": 3, "temperature": 0.7}, {"month": 4, "temperature": 6.9}, {"month": 5, "temperature": 11.1}, {"month": 6, "temperature": 17.3}, {"month": 7, "temperature": 21.8}, {"month": 8, "temperature": 26.6}, {"month": 9, "temperature": 19.2}, {"month": 10, "temperature": 12.1}, {"month": 11, "temperature": 6}, {"month": 12, "temperature": -2} ]; var naha = [ {"month": 1, "temperature": 14.9}, {"month": 2, "temperature": 17.6}, {"month": 3, "temperature": 17.1}, {"month": 4, "temperature": 20.4}, {"month": 5, "temperature": 23.9}, {"month": 6, "temperature": 27.9}, {"month": 7, "temperature": 28.9}, {"month": 8, "temperature": 28.3}, {"month": 9, "temperature": 27.9}, {"month": 10, "temperature": 25.2}, {"month": 11, "temperature": 23.7}, {"month": 12, "temperature": 18.6} ]; var line = d3.line() .x(function(d) { return x(d.month); }) .y(function(d) { return y(d.temperature); }); // X, Yの範囲を座標に置き換える var x = d3.scaleLinear() .range([0, width]); var y = d3.scaleLinear() .range([height, 0]); // Xの範囲はmonthの最小値から最大値 x.domain(d3.extent(tokyo, function(d) { return d.month; })); // Yの範囲は各地のtemperatureをすべて含めた最小値から最大値 m = [ d3.max(tokyo, function(d) { return d.temperature; }), d3.max(osaka, function(d) { return d.temperature; }), d3.max(sapporo, function(d) { return d.temperature; }), d3.max(naha, function(d) { return d.temperature; }) ]; console.log('m=' + m) y_max = d3.max(m); console.log('y_max=' + y_max); m = [ d3.min(tokyo, function(d) { return d.temperature; }), d3.min(osaka, function(d) { return d.temperature; }), d3.min(sapporo, function(d) { return d.temperature; }), d3.min(naha, function(d) { return d.temperature; }) ]; console.log('m=' + m) y_min = d3.min(m); console.log('y_min=' + y_min); y.domain([y_min, y_max]); // 色 var colors = d3.scaleOrdinal(d3.schemeCategory10); console.log(colors(0)) console.log(colors(1)) console.log(colors(2)) console.log(colors(3)) // line chartを描く g.append("path") .attr("d", line(tokyo)) .attr("stroke", colors(0)) .attr("stroke-width", 2) .attr("fill", "none"); g.append("path") .attr("d", line(osaka)) .attr("stroke", colors(1)) .attr("stroke-width", 2) .attr("fill", "none"); g.append("path") .attr("d", line(sapporo)) .attr("stroke", colors(2)) .attr("stroke-width", 2) .attr("fill", "none"); g.append("path") .attr("d", line(naha)) .attr("stroke", colors(3)) .attr("stroke-width", 2) .attr("fill", "none"); // X軸 (y=0の場所配置するためにtranslateでy(0)を指定する g.append("g") .attr("transform", "translate(0," + y(0) + ")") .call(d3.axisBottom(x)); // Y軸 g.append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("fill", "#000") .text("Temperature (℃)");実行例 (fc2に置いてあるページに飛びます)
0 件のコメント:
コメントを投稿