d3.js 잘못된 시간 눈금 표시

Question

2011 년과 2040 년의 에너지 사용량을 보여주는 누적 영역 차트를 작성 중입니다. 나중에 차트를 대화식으로 만듭니다. 차트가 작동하면이 예제를 사용합니다. http://bl.ocks.org/mbostock/3020685 하지만 틱이 잘못되었습니다. 그들은 2020 2030 및 2040 대신 .020 .030 .040을 표시합니다. 어디서 실수인지 알 수 없습니다. 나는 어떤 것을 시도했지만 아무 일도 없었다. 도움 주셔서 감사합니다. 여기

내 코드입니다 :

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); 

}; 

Answer 1

줄의 주석

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

그리고 당신은 당신은 Date들로 년 구문 분석해야

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

Answer 2

처럼 날짜를 구문 분석 할 수 . 이를 위해 현재 d.date이있는 모든 위치에

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

을 실행하십시오.

Answer 3

모든 날짜를 구문 분석하는 가장 쉬운 방법은 파서 기능을 사용하여 데이터 위에 반복하는 것입니다.

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

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