如何将“平均”线添加到 nvd3.js堆积面积图

How do I add an "average" line to an nvd3.js Stacked Area Chart?

本文关键字：nvd3 js 面积图 添加 平均      更新时间：2023-09-26

我有一个使用 NVD3 的工作堆积面积图.js：在这里工作 jsfiddle

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 才能做到这一点？

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

//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
}
您可以使用

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

它可以在 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

相关文章：