2

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;

}

バーに負の幅を割り当てています。私の入力データセットは単純に数値の配列であり、度数分布をプロットする必要があります

4

1 に答える 1

3

平均、標準偏差を実装する方法を尋ねている場合は、ヒストグラムを取得したら、その上に線とテキストを描画して平均を表すことができます。平均がどのバーにあるか、バーを通過する割合を計算してから、次のようにします。

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

これにより、平均を示す線が表示されます。標準偏差についても同様のことができます。

于 2012-10-26T16:21:18.570 に答える