PK‘•¸Jó—è33 index.html D3.js 折れ線グラフ - js do it PK‘•¸J›‹ªþø ø index.jsvar h = 300; var w = 380; var svg = d3.select('svg') var group = svg.append('g') .attr('transform', 'translate (' + [40, 80] + ')'); var line = group.append('path'); var baseData = []; for(var i=0; i < 12; i++){ baseData.push({x:i*10, y:0}) } var dataSet = [ {x:0, y:100}, {x:10, y:56}, {x:20, y:80}, {x:30, y:46}, {x:40, y:50}, {x:50, y:99}, {x:60, y:72}, {x:70, y:82}, {x:80, y:23}, {x:90, y:45}, {x:100, y:90}, {x:110, y:82}, ]; var xScale = d3.scale.linear().domain([0, 110]).range([0, w]); var yScale = d3.scale.linear().domain([0, 100]).range([h, 0]); var path = d3.svg.line() .x(function(d){ return xScale(d.x) }) .y(function(d){ return yScale(d.y) }); line.attr({ //折れ線グラフ d: path(dataSet), fill: 'none', stroke: 'red', 'stroke-width': 2 }); var areafill = d3.svg.area() .x(function(d){ return xScale(d.x) }) .y0(h) .y1(function(d){ return yScale(d.y) }) var area = group.append('path') //中身 .datum(dataSet) .attr({ 'fill': 'pink', d: areafill }) var xAxis = d3.svg.axis().scale(xScale).orient('bottom').ticks(5); var yAxis = d3.svg.axis().scale(yScale).orient('left').ticks(5); group.append('g') .attr({'transform': 'translate (' + [0, h] + ')', 'class': 'axis' }) .call(xAxis); group.append('g') .attr({'transform': 'translate (' + [0, 0] + ')', 'class': 'axis' }) .call(yAxis); var chStyle = ChageLineStyle(); svg.on('click', chStyle); setInterval(chStyle, 2000); function ChageLineStyle(){ var style = [ 'basis', 'step-before', 'bundle', 'cardinal', 'monotone' ] var i =0; return function (){ if(i > style.length) i=0; path.interpolate(style[i]); areafill.interpolate(style[i]); i++; line.attr('d', path(baseData)); area.attr('d', areafill(baseData)); line.transition().duration(1000).attr('d', path(dataSet)); area.transition().duration(1000).attr('d', areafill(dataSet)); } } window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element){ window.setTimeout(callback, 1000 / 60); }; })();PK‘•¸Jd®m style.css* { margin: 0; padding: 0; border: 0; } body { background: #000; } html, body, svg { width:100%; height:100%; } .axis path , .axis line { stroke:white; fill: none; } .axis text { fill:white; }PK‘•¸Jó—è33 ¶index.htmlPK‘•¸J›‹ªþø ø ¶[index.jsPK‘•¸Jd®m ¶y style.cssPK¥¡