Question

我正在制作一个堆积区域图表，显示2011年和2040年的能源使用情况。稍后我将使图表互动。图表有效，我使用了这个例子：http://bl.ocks.org/mbostock/3020685 但是蜱虫是错的。他们显示.020 .030 .040而不是2020年2030和2040。我无法找出错误在哪里。我尝试了一些东西但没有任何效果。谢谢你的帮助。

这是我的代码：

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

然后您可以解析日期

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

Answer 2

您必须将您的年份解析为Date s。为此，请运行

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

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

Answer 3

解析每个日期的最简单方法是使用解析器函数并将其循环遍历数据。

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

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

d3.js时间刻度错误

3 个答案: