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

, 당신은 표준 편차 유사 할 수 있습니다 : 평균 다음이 같은이며, 바 통해 길의 %와있는 줄 내가 계산합니다 .