d3.js - 将平均值和 n 数添加到 nvd3 箱线图中

Question

我在图表中使用 nvd3 boxplot。是否有任何选项可以将 mean 作为箱线图上的星号 (*) ？我们是否也可以在顶部 mustache 上方设置类似于下图的 n 值。

此问题已发布 here 。 提前致谢。

编辑 我想添加一个根据数据点计算的平均值，而不仅仅是箱线图的中心。由于异常值，计算出的平均值可能不在箱线图的中心。

Answer 1

您可以通过执行以下算法来实现此目的:

1. 获取所有矩形
2. 找到中间点
3. 创建一个文本并将其放在上面计算的中心

代码片段:

function makeMarkOnMean(){
    d3.selectAll(".mean").remove();//remove all * mean markers
    //get all the rectangles
    d3.selectAll(".nv-boxplot-box")[0].forEach(function(r){
      window.setTimeout(function(){
        var x = parseFloat(d3.select(r).attr("x")) + d3.select(r).attr("width")/2 - 3; //x position of the star
        var y = parseFloat(d3.select(r).attr("y")) + parseFloat(d3.select(r).attr("height"))/2+12;//y position of the star
        //now make the star on the above x and y        
        d3.select(r.parentNode).append("text").attr("class", "mean").style("font-size", "x-large").text("*").style("fill", "red").attr("x",x).attr("y", y);
      },500)
});

工作代码here .