22

d3とクロスフィルターに基づくDimensionalChartingjavascriptライブラリdc.jsを使用して棒グラフを作成しています。

私がやりたいのは、指定された数のビンを含むヒストグラムを表示することだけです。これは、barChart関数を使用して簡単に行うことができます。

0から90000までの浮動小数点値を含むという配列がdataあり、10個のビンを持つヒストグラムを使用して分布を表示したいだけです。

次のコードを使用して、以下のヒストグラムを作成します。

  var cf = crossfilter(data);
  var dim = cf.dimension(function(d){ return d[attribute.name]; });

  var n_bins = 10;
  var xExtent = d3.extent(data, function(d) { return d[attribute.name]; });
  var binWidth = (xExtent[1] - xExtent[0]) / n_bins;
  grp = dim.group(function(d){return Math.floor(d / binWidth) * binWidth;});
  chart = dc.barChart("#" + id_name);
  chart.width(200)
    .height(180)
    .margins({top: 15, right: 10, bottom: 20, left: 40})
    .dimension(dim)
    .group(grp)
    .round(Math.floor)
    .centerBar(false)
    .x(d3.scale.linear().domain(xExtent).range([0,n_bins]))
    .elasticY(true)
    .xAxis()
    .ticks(4);

ヒストグラム

それは本当に正しく見えません：各バーは本当に細いです！バーが太く、互いにほぼ接触し、各バーの間に数ピクセルのパディングがある、通常の外観のヒストグラムが必要です。私が間違っていることについて何か考えはありますか？

4

2 に答える 2

30

dc.jsの棒グラフは、xUnits関数を使用して、x軸の範囲に基づいてヒストグラムの棒の幅を自動的に計算します。幅を静的な値に設定する場合は、次のようなカスタムxUnits関数を使用できます。

chart.xUnits(function(){return 10;});

これにより、より適切な幅が得られます。

于 2013-03-03T22:25:58.217 に答える
4

カスタム関数を指定するためにを使用するためにuser2129903によって与えられた提案は、確かに進むべき道です。そのカスタム関数の戻り値を選択するための例と説明を追加したいと思います。chart.xUnits()xUnits

ドキュメントによると：

この関数は、x軸上のすべてのデータポイントのJavascript配列、または軸上のポイントの数を返すことが期待されています。

つまり、ヒストグラムを作成する場合は、ビンの数を直接指定するか、目的のビンサイズから計算して、その関数から返すことができます。グループ化の数値キーが連続した等距離の整数でない場合は、これを指定する必要があります。

次に例を示します。

<!DOCTYPE html><meta charset="utf-8">
<head>
    <link rel="stylesheet" type="text/css" href="js/dc.css"/>
    <script src="js/crossfilter.js"></script>
    <script src="js/d3.js"></script>
    <script src="js/dc.js"></script>
</head>
<body>
    <div id="chart"></div>
</body>
<script>
    // generate data
    var min_value = 0, max_value = 18, value_range = max_value-min_value;
    var data = [];
    for (var i = 0; i < 1000; i++)
        data.push({x: Math.random()*value_range+min_value});
    // create crossfilter dimension for column x
    var cf = crossfilter(data),
        x = cf.dimension(function(d) {return d.x;});
    // create histogram: group values to `number_of_bins` bins
    var number_of_bins = 10,
        bin_width = value_range/number_of_bins,
        //number_of_bins = value_range/bin_width,
        x_grouped = x.group(
            function(d) {return Math.floor(d/bin_width)*bin_width;});
    // generate chart
    dc.barChart("#chart").dimension(x)
        .group(x_grouped)
        .x(d3.scale.linear().domain([min_value,max_value]))
        // let the bar widths be adjusted correctly
        .xUnits(function(){return number_of_bins;})
        .xAxis();
    dc.renderAll();
</script>

この例では、グループオブジェクト自体からビンの数またはビンのキー値を取得することもできます。たとえば、次のようになります。

// number of bins
chart.xUnits(function(){return x_grouped.all().length;});
// bins' key values
chart.xUnits(function(){return x_grouped.all().map(function(d) {return d.key;});});

ただし、空のビンがある場合、これは失敗します（つまり、間違ったバー幅が生成されます）。

参考のために：

于 2016-04-27T09:31:42.127 に答える