D3.js 折れ線グラフ _shimizu Follow 2015-11-17 17:55:07 License: Refer to code comments Fork2 Fav2 View3869 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 115 lines HTML 2 lines CSS 25 lines D3.js 折れ線グラフ var 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); }; })(); <script src="http://d3js.org/d3.v3.min.js"></script> <svg></svg> D3.js 折れ線グラフ * { 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; } var 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); }; })(); <script src="http://d3js.org/d3.v3.min.js"></script> <svg></svg> * { 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author _shimizu URLhttp://shimz.me/blog/ 群馬県高崎市在住のエンジニア 。サーバ管理したり、自動組版のスクリプト組んだり、サイト作ったりして生きてます。データビジュアライゼーションとオープンデータにハマってます。Webデザイン ＆ JS勉強中。 I luv javascript! Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/zPv6/js"></script> art&design d3.js Discussion Questions on this code? Tags art&design d3.js Favorite by kazuki_nagas otanet: じみに折れ線グラフとかよく用いるんで重要！ Forked sort by latest page views favorite forked forked: D3.js 折れ線グラフ OpenFlex 00 907 109/2/19 art&design d3.js forked: D3.js 折れ線グラフ mnagaku 00 303 116/2/25 art&design d3.js
