D3.jsで時間スケールを使用すると、x（i）の値が正しく返されない

D3.jsを使用して簡単なグラフを作成すると、このエラーが発生します。D3.jsで時間スケールを使用すると、x（i）の値が正しく返されない

var data = { 
    "Elektrotehnički fakultet Osijek": { "2008/09":1539, "2009/10":1678, "2010/11":1873, "2011/12":2231, "2012/13":2192, "2013/14":1841}, 
    "Fakultet elektrotehnike i računarstva Zagreb": { "2008/09":4795, "2009/10":4538, "2010/11":4320, "2011/12":4913, "2012/13":4634, "2013/14":3290}, 
    "Fakultet elektrotehnike strojarstva i brodogradnje Split": { "2008/09":2480, "2009/10":2685, "2010/11":2790, "2011/12":2769, "2012/13":2649, "2013/14":2633} 
    } 

var margin = {top: 50, bottom: 70, left:70, right: 30}; 
var width = 700 - margin.left - margin.right; 
var height = 500 - margin.top - margin.bottom; 


var timeFormat2 = d3.time.format('%Y'); 
function returnArray(){ 
     var a = []; 
     var keys = Object.keys(data["Elektrotehnički fakultet Osijek"]); 
     for(var i = 0; i < Object.keys(data["Elektrotehnički fakultet Osijek"]).length; i++){ 
      a.push(timeFormat2(new Date(keys[i].substring(0, keys[i].indexOf('/'))))) 
     } 
     console.log(a); 
     return a; 
    } 

var x = d3.time.scale() 
    .domain(returnArray()) 
    .range([0, width/5, 2*width/5, 3*width/5, 4*width/5, 5*width/5]); 

var y = d3.scale.linear() 
    .domain([0, 5000]) 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(function(d, i) { return Object.keys(data["Elektrotehnički fakultet Osijek"])[i].replace(/_/g, ' '); }); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(10); 

var valueline = d3.svg.line() 
    .x(function(d, i) { return x(i); }) 
    .y(function(d) { return y(d); }); 
var linechart = svg.append("path") 
    .attr("class", "line") 
    .attr("d", valueline(Object.values(data["Elektrotehnički fakultet Osijek"]))) 
    .style("stroke", "blue") 
    .style("stroke-width", "2") 
    .style("fill", "none")

Iはvaluelineのx軸、X（I）機能のための順序尺度を使用する場合、SVGと折れ線グラフ内にある有効な値が正常に描画される返します。しかし、私は時間スケールを使用している場合、これらの値が有効な値です - 私はそうのように、この番号を追加した場合240960.：

var valueline = d3.svg.line() 
    .x(function(d, i) { return x(i)+2409600; }) 
    .y(function(d) { return y(d); });

コード作品とチャートが再び正常に描画されます。なぜ私はこの奇妙な価値とそれを修正する方法を取得するのですか？

出典

2017-03-18 ace196

タイムスケールを使用している場合は、の日付が渡されます。このライン：

.x(function(d, i) { return x(i); })

は、配列のインデックス値で通過している（すなわち0、1、2 ...）

これは、あなたがあることをあなたがvaluelineに渡すデータを変更する必要があるとしている機能させるにはオブジェクトの配列。各オブジェクトはxの日付とyの値を持ちます。

ここでは、適切な日付の解析とあなたの全体のコードスニペットリファクタリングです：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <script> 
 
     var data = { 
 
    "Elektrotehnički fakultet Osijek": { "2008/09":1539, "2009/10":1678, "2010/11":1873, "2011/12":2231, "2012/13":2192, "2013/14":1841}, 
 
    "Fakultet elektrotehnike i računarstva Zagreb": { "2008/09":4795, "2009/10":4538, "2010/11":4320, "2011/12":4913, "2012/13":4634, "2013/14":3290}, 
 
    "Fakultet elektrotehnike strojarstva i brodogradnje Split": { "2008/09":2480, "2009/10":2685, "2010/11":2790, "2011/12":2769, "2012/13":2649, "2013/14":2633} 
 
    } 
 

 
var margin = {top: 50, bottom: 70, left:70, right: 30}; 
 
var width = 700 - margin.left - margin.right; 
 
var height = 500 - margin.top - margin.bottom; 
 

 
var svg = d3.select('body') 
 
    .append('svg') 
 
    .attr('width', width) 
 
    .attr('height', height); 
 

 
var timeFormat2 = d3.time.format('%Y'); 
 

 
// this will end up being an array 
 
// of objects with two properties, date and value 
 
var properData = []; 
 
for (key in data["Elektrotehnički fakultet Osijek"]){ 
 
    var value = data["Elektrotehnički fakultet Osijek"][key], 
 
     date = timeFormat2.parse(key.split("/")[0]); 
 
    properData.push({ 
 
    value: value, 
 
    date: date 
 
    }) 
 
} 
 

 
var x = d3.time.scale() 
 
    .domain(d3.extent(properData, function(d){ return d.date })) 
 
    .range([0, width]); 
 

 
var y = d3.scale.linear() 
 
    .domain([0, 5000]) 
 
    .range([height, 0]); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(x) 
 
    .orient("bottom") 
 
    .tickFormat(function(d, i) { return Object.keys(data["Elektrotehnički fakultet Osijek"])[i].replace(/_/g, ' '); }); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left") 
 
    .ticks(10); 
 

 
var valueline = d3.svg.line() 
 
    .x(function(d, i) { return x(d.date); }) 
 
    .y(function(d) { return y(d.value); });  
 
    
 
var linechart = svg.append("path") 
 
    .attr("class", "line") 
 
    .attr("d", valueline(properData)) 
 
    .style("stroke", "blue") 
 
    .style("stroke-width", "2") 
 
    .style("fill", "none") 
 
    </script> 
 
    </body> 
 

 
</html>

出典

2017-03-18 21:25:59 Mark

D3.jsで時間スケールを使用すると、x（i）の値が正しく返されない

答えて

関連する問題