如何在 nvd3.js 堆积面积图中添加“平均”线？

Question

我有一个使用 NVD3.js 的有效堆积面积图：working jsfiddle here

var volumeData = [{"key":"Hit","values":[[1.3781628E12,12],[1.3782492E12,9],[1.3783356E12,9],[1.378422E12,4],[1.3785084E12,2],[1.3785948E12,3],[1.3786812E12,6],[1.3787676E12,5],[1.378854E12,1],[1.3789404E12,5],[1.3790268E12,1],[1.3791132E12,3],[1.3791996E12,0],[1.379286E12,2],[1.3793724E12,0]]},{"key":"Miss","values":[[1.3781628E12,3],[1.3782492E12,3],[1.3783356E12,1],[1.378422E12,12],[1.3785084E12,4],[1.3785948E12,7],[1.3786812E12,10],[1.3787676E12,13],[1.378854E12,14],[1.3789404E12,8],[1.3790268E12,5],[1.3791132E12,2],[1.3791996E12,3],[1.379286E12,11],[1.3793724E12,6]]}];


(function(data){
    var colors = d3.scale.category20();
    keyColor = function(d, i) {return colors(d.key)};

    var chart;
    nv.addGraph(function() {
        chart = nv.models.stackedAreaChart()
        .x(function(d) { return d[0] })
        .y(function(d) { return d[1] })
        .color(keyColor);

        chart.xAxis.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

        chart.yAxis.tickFormat(d3.format('d'));

        d3.select('#graph svg')
        .datum(data)
        .transition().duration(0)
        .call(chart);

        //nv.utils.windowResize(chart.update);

        return chart;
    });
})(volumeData);

我想做的是在可见的 x 范围内为每个系列添加一条“平均”线。我可以轻松计算每个系列的平均值，我只是不知道如何让线显示在图表上。

是否可以使用 nvd3.js，或者我必须下拉到 d3 才能做到这一点？

Answer 1

另外两个选项：
1. 快速但有点笨拙，通过为每个 x 值设置相同的 y 值，在数据中为每条平均线创建另一条线。尽管每个 x 刻度都会有一个平均值相同的工具提示，但您会得到一条直线。
2. 从平均值在 y 轴上的点开始在图表上画一条固定线：

//margin from chart declaration
var margin = { top: 30, right: 60, bottom: 60, left: 100 };
//calculate the yScale
var yScale = chart.yAxis.scale();
//call generic function...since you'll want this on potentially multiple types of charts
drawFixedLineAndText(chartID, 960, margin, <your average value goes here>, yScale, <your average label text goes here>);

function drawFixedLineAndText(chartName, width, margin, yValue, yValueScale, text) {
var svg = d3.select("#" + chartName + " svg");
svg.append("line")
    .style("stroke", "#FF7F0E")
    .style("stroke-width", "2.5px")
    .attr("x1", margin.left)
    .attr("y1", yValueScale(yValue) + margin.top)
    .attr("x2", width - margin.right)
  .attr("y2", yValueScale(yValue) + margin.top);


//add text to fixed line
d3.select("#" + chartName + " svg")
    .append("text")
    .attr("x", width - margin.right / 2)
    .attr("y", yValueScale(yValue) + margin.top)
    .attr("text-anchor", "middle")
    .text(text);
//end fixed line
}

Answer 2

您可以使用 nvD3 多图表选项来实现它。 https://github.com/novus/nvd3/blob/master/examples/multiChart.html

Answer 3

可以在 D3 中完成。在处理面积数据时计算直线的平均值：

var line = d3.svg.line().interpolate("basis").x(function(d) {
    return x(d.x_axis);
}).y(function(d) {
    return y(d.y_axis);
});
var stacked_data = [];
var line_data = [];
data.forEach(function(d) {
    var total = 0;
    for (var i = 0; i < AREAS.length; i++) {
        var nd = {};
        nd.date = X_DATA_PARSE(d.date);
        nd.key = AREAS[i];
        nd.value = +d[AREAS[i]];
        stacked_data.push(nd);
        total = total + nd.value;
    }
    var ld = {};
    ld.x_axis = X_DATA_PARSE(d.date);
    ld.y_axis = total / AREAS.length;
    line_data.push(ld);
});

然后像普通折线图一样画线：

svg.append("path")
  .datum(line_data)
  .attr("class", "line")
  .attr("d", line);

这是一个完整的例子：

http://vida.io/documents/jXKmv3j3gF9LmtiyW