javascript - d3 可重用直方图

Question

我一直在尝试在使用 d3 绘制的直方图上实现可重用性。我希望在绘制数据集后，我想在同一个图上绘制统计均值、方差等。这些将由用户驱动，基本上我想使用同一个图。

这是我对编写骨架直方图代码的尝试

function histogram(){

//Defaults
 var margin = {top: 20, right: 20, bottom: 20, left: 20},
  width = 760,
  height = 200;

function chart(selection){

    selection.each(function(d,i){

    var x = d3.scale.linear()
    .domain( d3.extent(d) )
    .range( [0, width] );

    var data = d3.layout.histogram()
        //Currently generates 20 equally spaced bars
        .bins(x.ticks(20))
        (d);

    var y = d3.scale.linear()
        .domain([0, d3.max(d) ])
        .range([ height - margin.top - margin.bottom, 0 ]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var svg = d3.select(this).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var bar = svg.selectAll(".bar")
        .data(data)
      .enter().append("g")
        .attr("class", "bar");

    /*
        Corrected bars
         bar.append("text")
            .attr("dy", ".75em")
            .attr("y", 6)
            .attr("x", x(data[0].dx) / 2)
            .attr("text-anchor", "middle")
            .text(function(d) { return formatCount(d.y); });
        */

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis); 

    svg.append("g")
        .attr("class","y axis")
        .call(yAxis);

    bar.append("rect")
        .attr("x", function(d,i){ return x(d.x); })
        .attr("width", x(data[0].dx) - 1)
        .attr('y',height)    
      .transition()
      .delay( function(d,i){ return i*50; } )
        .attr('y',function(d){  return y(d.y) })
        .attr("height", function(d) { return height - y(d.y); });


    });

}

 //Accessors//       
chart.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return chart;
};

 chart.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return chart;
};

return chart;

}

它为条形分配负宽度。我的输入数据集只是一个数字数组，我需要绘制频率分布图

Answer 1

如果您询问如何实现平均值、标准偏差，一旦您有了直方图，您就可以在其上绘制线条和文本来表示平均值。我会计算平均值在哪个条中，以及通过条的百分比，然后是这样的:

var averageBar = vis.selectAll("g.bar:nth-child(" + (averageBarIndex + 1) + ")");
averageBar.append("svg:line")
.attr("x1", 0)
.attr("y1", y.rangeBand()*averageBarPercentage)
.attr("x2", w)
.attr("y2", y.rangeBand() * averageBarPercentage)
.style("stroke", "black");

averageBar.append("svg:text")
.attr("x", w-150)
.attr("y", y.rangeBand() * averageBarPercentage-15)
.attr("dx", -6)
.attr("dy", "10px")
.attr("text-anchor", "end")
.text("Average");

这会给你一条标记平均值的线，你可以对标准偏差做类似的事情。