d3可重复使用的直方图

问题描述：

我一直在尝试使用d3绘制的直方图上实现可重用性。我想在绘制数据集之后，我想在同一图上绘制统计平均值，方差等。这些将是用户驱动的，基本上我想使用同一个绘图。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; 

}

它分配酒吧负宽度尝试。我的输入数据集只是一个数字数组，并且我需要绘制频率分布图

这里有问题吗？你可能会发现现有的[直方图图例]（http://bl.ocks.org/1933560）相关，但请注意，我更喜欢[新的直方图示例]（http://bl.ocks.org/3048450）。 – mbostock 2012-08-12 21:43:11

答

如果您要求如何实现平均值，标准差，一旦您获得了直方图，就可以在其上绘制直线和文本代表平均值。我会计算这条平均是，和的方式，通过栏中％，然后是这样的：

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");

这会给你一个标线的平均值，你能做的标准偏差相似。

d3可重复使用的直方图

相关推荐