// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ;
var data = [10, 20, 100]; var g = d3.select("#content") .datum(data) .append("g") .attr("id", "g-0" ) ;
var data = [10, 20, 100]; var g = d3.select("#content") .selectAll("g") .datum(data) .enter() .append("g") .attr("id", function(d,i){return "g-"+i ;}) ; // 結果は何のエレメントが作成されない
var dataset = ["aaa", "bbb", "ccc"] ;
<script src="https://d3js.org/d3.v4.js"></script> <svg id="content"> </svg>
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) // データセット .enter() // 作成するエレメントへのjoin .append("text") //エレメントの新規作成
var dataset = ["aaa", "bbb", "ccc"] ; d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append("text") .attr("x", function(d,i){ return i* 60 }) // コールバック関数でx座標計算 .attr("y", 20) .text(function(d,i){ return d }) // コールバック関数でテキスト表示 ;
var dataset = ["aaa", "bbb", "ccc"] ; // 作成したエレメントをtext_elesに var text_eles = d3.select("#content") .selectAll("text") .data( dataset ) .enter() .append( 'text' ) ; // 作成されたエレメントをコンソールに console.( text_eles ) ;
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
// 折れ線チャート描画のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // SVGのpathプロパティ(d)への変換 var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) // x軸のデータ .y(function(d) { return y_scale(d.val); }) // y軸のデータ ; console.log(valueline(data_set)); // SVGのpathプロパティ(d)の確認 // 結果: M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) // データのバインディング .attr("d", valueline) // 設定されたd3.line() を渡す .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ;
var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), // 日付の最小値 d3.max(data_set.map( function(d){return d.date;} ) ) ] ) // 日付の最大値 .range([0, width]); line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) // 日付のフォーマット変換 ;
時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ return { date: timeparser(d.date), val:d.val } ; } ); var width=500, height=200 ; var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); var y_scale = d3.scaleLinear() .domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ]) .range([height, 0]); var valueline = d3.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.val); }) ; var line_svg = d3.select("body") .append("svg") .attr("width", 800) .attr("height", 300) ; line_svg.append( "path" ) .attr("transform", "translate(40, 20)") .datum(data_set) .attr("d", valueline) .attr("fill","none") .attr("stroke", "steelblue") .attr("stroke-width", 2) ; line_svg.append("g") .attr("transform", "translate(40,"+(height+20)+")") .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e"))) ; line_svg.append("g") .attr("transform", "translate(40,20)") .call(d3.axisLeft(y_scale)) ;