我正在尝试将燃烧图表中的更改请求所产生的"额外工作"可视化.我设法绘制了图表,但我喜欢使用显示增加的垂直线来拥有自己的颜色.像这样的东西:

我的数据是这样的:

   var actualRaw = [{
        date: new Date(2017, 1, 1),
        added: 0,
        done: 50
    }, {
        date: new Date(2017, 1, 15),
        added: 10,
        done: 40
    }]

我改造成这样的:

    var actual = [];

    actualRaw.map(line => {
        actual.push({
            date: line.date,
            points: line.done,
            class: 'la'
        });
        actual.push({
            date: line.date,
            points: line.done + line.added,
            class: 'ln'
        });

    })

然后尝试应用这样的格式:

    chart.append("path")
        .datum(actual)
        .attr("class", function(d, i) {
            return 'line ' + d[i].class;
        })
        .attr("d", actualLine);

但是,该函数只被调用一次.我错过了什么？

到目前为止,我的尝试完成

简单地说:你不能像这样设计SVG 元素的不同部分.

但也有其他选择.例如,我只是在actual...中添加键/值对

actualRaw.map(line => {
    actual.push({
        date: line.date,
        points: line.done,
        class: 'la'
    });
    actual.push({
        date: line.date,
        points: line.done + line.added,
        class: 'ln',
        added: line.added//this one here...
    });
})

...并使用它绘制简单的线条(即SVG 元素):

var redLines = chart.selectAll(null)
    .data(actual.filter(function(d) {
        return d.added
    }))
    .enter()
    .append("line")
    .attr("x1", function(d) {
        return x(d.date)
    })
    .attr("x2", function(d) {
        return x(d.date)
    })
    .attr("y1", function(d) {
        return y(d.points)
    })
    .attr("y2", function(d) {
        return y(d.points - d.added)
    })
    .style("stroke", "red");

以下是包含这些更改的代码:

  
  
  



  
Burn Chart