Forked from: a.agata's 2017-07-06 1st View Diff (13) forked: 2017-07-06 1st bentouotoko Follow 2018-02-05 11:27:05 License: MIT License Fork0 Fav0 View196 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 74 lines HTML 3 lines CSS 12 lines forked: 2017-07-06 1st // forked from a.agata's "2017-07-06 1st" http://jsdo.it/a.agata/YAdF // サンプルデータ var dataSet = [ {x:0, y:5}, {x:1, y:26}, {x:2, y:10}, {x:3, y:56}, {x:4, y:46}, {x:5, y:87}, ]; var dataSet2 = [ {x:0, y:6}, {x:0.5, y:7}, {x:1.7, y:21}, {x:2.3, y:34}, {x:3.7, y:45}, {x:4.8, y:67}, ]; // SVGの描画サイズとマージン var margin = {top : 20, right : 40, bottom : 100, left : 100}; var width = 800 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; // SVGの表示領域を生成 var svg = d3.select("#myGraph") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //x軸のスケールを作成 var xScale = d3.scaleLinear() .domain([0, d3.max(dataSet, function(d){return d.x})]) .range([0, width]) .nice(); //y軸のスケールを作成 var yScale = d3.scaleLinear() .domain([0, d3.max(dataSet, function(d){ return d.y + 5; })]) .range([height, 0]) .nice(); //x,y軸の作成 var xAxis = d3.axisBottom(xScale); var yAxis = d3.axisLeft(yScale); //x,yの値からスケール後のlineを描画するための関数 var line = d3.line() .x(function(d) {return xScale(d.x);}) .y(function(d) {return yScale(d.y);}) .curve(d3.curveLinear); // x軸を描画 svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // y軸を描画 svg.append("g") .attr("class", "y axis") .call(yAxis); // path要素として折れ線グラフを描画 svg.append("path") .datum(dataSet) .attr("class", "line") .attr("d", line(dataSet)); svg.append("path") .datum(dataSet２) .attr("class", "line") .attr("d", line(dataSet２)); <script src="https://d3js.org/d3.v4.min.js"></script> <svg id="myGraph"></svg> forked: 2017-07-06 1st .tick text { font-size: 18px; } .x .tick text{ font-size: 18px; transform: rotate(-45deg) translate(-30px, -5px); } .line { fill: none; stroke: blue; stroke-width: 2px; } // forked from a.agata's "2017-07-06 1st" http://jsdo.it/a.agata/YAdF // サンプルデータ var dataSet = [ {x:0, y:5}, {x:1, y:26}, {x:2, y:10}, {x:3, y:56}, {x:4, y:46}, {x:5, y:87}, ]; var dataSet2 = [ {x:0, y:6}, {x:0.5, y:7}, {x:1.7, y:21}, {x:2.3, y:34}, {x:3.7, y:45}, {x:4.8, y:67}, ]; // SVGの描画サイズとマージン var margin = {top : 20, right : 40, bottom : 100, left : 100}; var width = 800 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; // SVGの表示領域を生成 var svg = d3.select("#myGraph") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //x軸のスケールを作成 var xScale = d3.scaleLinear() .domain([0, d3.max(dataSet, function(d){return d.x})]) .range([0, width]) .nice(); //y軸のスケールを作成 var yScale = d3.scaleLinear() .domain([0, d3.max(dataSet, function(d){ return d.y + 5; })]) .range([height, 0]) .nice(); //x,y軸の作成 var xAxis = d3.axisBottom(xScale); var yAxis = d3.axisLeft(yScale); //x,yの値からスケール後のlineを描画するための関数 var line = d3.line() .x(function(d) {return xScale(d.x);}) .y(function(d) {return yScale(d.y);}) .curve(d3.curveLinear); // x軸を描画 svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // y軸を描画 svg.append("g") .attr("class", "y axis") .call(yAxis); // path要素として折れ線グラフを描画 svg.append("path") .datum(dataSet) .attr("class", "line") .attr("d", line(dataSet)); svg.append("path") .datum(dataSet２) .attr("class", "line") .attr("d", line(dataSet２)); <script src="https://d3js.org/d3.v4.min.js"></script> <svg id="myGraph"></svg> .tick text { font-size: 18px; } .x .tick text{ font-size: 18px; transform: rotate(-45deg) translate(-30px, -5px); } .line { fill: none; stroke: blue; stroke-width: 2px; } 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 bentouotoko 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/QbVB/js"></script> art&design Discussion Questions on this code? Tags art&design
