d3.js錯誤的時間刻度

我正在繪製顯示2011年和2040年能源使用情況的堆積面積圖。稍後我將使圖表互動。圖表起作用，我用這個例子：http://bl.ocks.org/mbostock/3020685 但是Ticks是錯誤的。他們顯示.2020.030.040而不是20202030和2040. 我無法找出錯誤在哪裏。我嘗試了一些東西，但沒有奏效。謝謝你的幫助。d3.js錯誤的時間刻度

這裏是我的代碼：

function szenario() { 
    var data = [{"key":"Strom (fossil)", "value": 30, "date": 2011}, 
     {"key":"Strom aus Biomasse", "value": 3, "date": 2011},     
     {"key":"Strom aus Windkraft", "value": 5, "date": 2011}, 
     {"key":"Strom aus Photovoltaik", "value": 2, "date": 2011}, 
     {"key":"Strom aus Wasserkraft", "value": 4, "date": 2011}, 
     {"key":"Wärme aus Biomasse", "value": 2, "date": 2011}, 
     {"key":"Wärme aus Solarenergie", "value": 1, "date": 2011}, 
     {"key":"Wärme (fossil)", "value": 40, "date": 2011}, 
     {"key":"Bio-Treibstoffe", "value": 5, "date": 2011}, 
     {"key":"Treibstoffe-fossil", "value": 45, "date": 2011}, 
     {"key":"Strom (fossil)", "value": 0, "date": 2040}, 
     {"key":"Strom aus Biomasse", "value": 20, "date": 2040},      
     {"key":"Strom aus Windkraft", "value": 30, "date": 2040}, 
     {"key":"Strom aus Photovoltaik", "value": 15, "date": 2040}, 
     {"key":"Strom aus Wasserkraft", "value": 5, "date": 2040}, 
     {"key":"Wärme aus Biomasse", "value": 10, "date": 2040}, 
     {"key":"Wärme aus Solarenergie", "value": 8, "date": 2040}, 
     {"key":"Wärme (fossil)", "value": 0, "date": 2040}, 
     {"key":"Bio-Treibstoffe", "value": 20, "date": 2040}, 
     {"key":"Treibstoffe-fossil", "value": 0, "date": 2040} 
    ]; 


    //var formatX = d3.time.format("%Y"); 
    var formatY = d3.format(""); 

    var margin = {top: 20, right: 30, bottom: 30, left: 40}, 
     width = 520 - margin.left - margin.right, 
     height = 400 - margin.top - margin.bottom; 

    var x = d3.time.scale() 
     .range([0, width]); 

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

    var z = d3.scale.category20c(); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom") 
     .ticks(3) 
     ; 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .tickFormat(formatY); 

    var stack = d3.layout.stack() 

     .offset("zero") 
     .values(function(d) { return d.values; }) 
     .x(function(d) { return d.date; }) 
     .y(function(d) { return d.value; }); 

    var nest = d3.nest() 
     .key(function(d) { return d.key; }); 

    var area = d3.svg.area() 

     .interpolate("cardinal") 
     .x(function(d) { return x(d.date); }) 
     .y0(function(d) { return y(d.y0); }) 
     .y1(function(d) { return y(d.y0 + d.y); }); 

    var svg = d3.select("#Szenarioanzeige") 
     .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 



    /*d3.map(data, function(data) { 
     data.forEach(function(d) { 
     d.date = formatX(d.date); 
     d.value = +d.value; 
     }); 
    });*/ 



     var layers = stack(nest.entries(data)); 

     x.domain(d3.extent(data, function(d) { return d.date; })); 
     y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]); 

     svg.selectAll(".layer") 
      .data(layers) 
      .enter().append("path") 
      .attr("class", "layer") 
      .attr("d", function(d) { return area(d.values); }) 
      .style("fill", function(d, i) { return z(i); }); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis); 

};

來源

2013-12-20 CST

當你說蜱是錯的時，你是什麼意思？ –

格式錯誤。我想要2020,2030和2040標記的標記。但是圖表顯示的標記如.020 .030和0.40 – CST

您需要將您的年份解析爲日期。 'd3.time.format（「％Y」）。parse（d.date）;' –

取消對該行

var formatX = d3.time.format("%Y");

然後你就可以解析日期一樣

> formatX.parse("2008") 
Tue Jan 01 2008 00:00:00 GMT+0000 (GMT Standard Time)

來源

2013-12-20 11:19:18

我嘗試過使用formatX行。但是找不到解決我代碼中的問題的正確方法。 – CST

你必須分析你年入Date小號。要做到這一點，請運行

d3.time.format("%Y").parse("" + d.date)

在您目前有d.date的每個地方。

來源

2013-12-20 14:42:10

在一個地方突變日期會更好，以避免每次重新解析？ –

是的。實際上，它在性能方面幾乎沒有什麼區別，但代碼更簡潔。 –

解析每個日期的最簡單方法是具有解析器函數並將其循環到數據上。

var parseDate = d3.time.format("%Y).parse; 

data.forEach(function(d) { 
    d.date = parseDate(d.date); 
});

來源

2014-08-12 14:36:46 Seri

d3.js錯誤的時間刻度

回答

相關問題