javascript - 解析 D3 中堆积面积图的数组

Question

我正在尝试修改示例堆积面积图 here

目前它给了我一个错误:

Error: <path> attribute d: Expected number, "MNaN,22770LNaN,21…".

在这一行:.attr('d', area);

这是我到目前为止的代码:

let margin = {top: 20, right: 60, bottom: 30, left: 60},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    let parseDate = d3.timeParse('%m/%d/%Y');

    let x = d3.scaleTime().range([0, width]),
        y = d3.scaleLinear()
            .range([height, 0]),
        z = d3.scaleOrdinal()
        .domain(['Detractors', 'Passives' , 'Promoters'])
        .range(['#e81123', '#a0a1a2', '#7fba00']);

    let stack = d3.stack();

    let area = d3.area()
        .x(function(d) { return x(d.data.date); })
        .y0(function(d) { return y(d.y0); })
        .y1(function(d) { return y(d.y0 + d.y); });

    let g = this._svg.append('g')
        .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');

    let data = [
                { 'date': '04/23/12' , 'Detractors': 20 , 'Passives': 30 , 'Promoters': 50 },
                { 'date': '04/24/12' , 'Detractors': 32 , 'Passives': 19 , 'Promoters': 42 },
                { 'date': '04/25/12' , 'Detractors': 45 , 'Passives': 11 , 'Promoters': 44 },
                { 'date': '04/26/12' , 'Detractors': 20 , 'Passives': 13 , 'Promoters': 64 }];

    // console.log(myData.map(function (d) { return d.key; }));

    // console.log('KEYS: '+ keys);

    x.domain(d3.extent(data, function(d) {
        console.log(parseDate(d.date));
        return parseDate(d.date); }));
    // let keys = (d3.keys(data[0]).filter(function (key) { return key !== 'date'; }));
    z.domain(d3.keys(data[0]).filter(function (key) { return key !== 'date'; }));
    // z.domain(keys);
    stack.keys(d3.keys(data[0]).filter(function (key) { return key !== 'date'; }));

    let layer = g.selectAll('.layer')
        .data(stack(data))
        .enter().append('g')
        .attr('class', 'layer');

    layer.append('path')
        .attr('class', 'area')
        .style('fill', function(d) {
            // console.log('d.key: ' + d.key);
            console.log('d.key: ' + d.key +  ' color: ' + z(d.key));
            return z(d.key); })
        .attr('d', area);

    layer.filter(function(d) { return d[d.length - 1][1] - d[d.length - 1][0] > 0.01; })
        .append('text')
        .attr('x', width - 6)
        .attr('y', function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); })
        .attr('dy', '.35em')
        .style('font', '10px sans-serif')
        .style('text-anchor', 'end')
        .text(function(d) {
            // console.log('key label: ' + d.key);
            return d.key; });


    g.append('g')
        .attr('class', 'axis axis--x')
        .attr('transform', 'translate(0,' + height + ')')
        .call(d3.axisBottom(x));

        // console.log(height);
    g.append('g')
        .attr('class', 'axis axis--y')
        .call(d3.axisLeft(y).ticks(5, '%'));

    }

我只是想解析数组，这样我就可以正确解析日期、键和值。我似乎无法正确理解。

非常感谢您的帮助!!

Answer 1

您收到的具体错误是由于数据中的日期格式造成的。您在代码中注释掉了一行: let parseDate = d3.timeParse("%m/%d/%Y"); 您确实希望使用 d3.timeParse 函数来转换数据迄今为止的格式:

let tp = d3.timeParse("%m/%d/%y")
for(var i=0; i<data.length;i++){
  data[i].date = tp(data[i].date) 
}