1

以下は、d3と少しのjQueryを使用してヒストグラムを生成するために私が使用しているものです。http://bl.ocks.org/4611158

ほとんどは正しいように思えるかもしれませんが、私はまだ混乱しています

  1. 上記の例で与えられた入力にあるはずのように、x 軸に「14」がないのはなぜですか? 代わりに、13 は 14 の縦座標を取得します。

  2. 私の試行では、スケールの出力範囲をゼロ以外の値に変更しようとすると、 d3.layout.histogram() に負の(したがってプロットテーブルではない)幅が割り当てられました。なぜそうなのですか？可能な回避策は何ですか？

序数スケールを使用する主な動機は、Mikeがヒストグラムのデモで使用したものとは異なり、目盛りをバーの下の中央に配置することでした。また、まったく同じ目的で、ビンの数を d3.layout.histogram() の目盛りの数と等しくしました。私が探しているものをコーディングするためのより良い方法があるかもしれないと確信しています

また、 nvd3 ビジュアライゼーション(背景の明るい灰色) で行われたようなインジケーター ラインの「グラフ」を追加して、より快適にする方法はありますか?

4

1 に答える 1

3

はなく、x 軸に142 つの があります。8これは、API リファレンスに従ってbins、関数が範囲= 14 - 1 = 13を慎重に14間隔に分割するためです。

ビンは数値として指定できます。この場合、値の範囲は指定された数のビンに均等に分割されます。または、ビンは、ビンを定義するしきい値の配列である場合があります。指定された配列には右端 (上) の値が含まれている必要があるため、n 個のビンに対して n + 1 個の値を指定します。...

この問題を解決する前に、あなたが直面している 2 番目の問題は、rangeDefaultに負の値がある場合、一部の値がプロットされないことだと思います。その問題を修正するために、その正確な必要性を認識していないため、次のものを削除することから始めます。

rangeDefault[0] = 0; //All histograms start from 0 <-- REMOVED

次に、最初の問題を修正するには、次のように 2 番目の形式の引数を使用しbinsます。

  var bins = [];
  for(var ii = settings.range[0], jj = 0; ii <= settings.range[1] + 1; ii++, jj++)
      bins[jj] = ii;

  var data = d3.layout.histogram()
                .bins(bins)(settings.data);

これが主要なクエリに対処することを願っています。

ここに示すように、薄い灰色のインジケーター ラインを追加するのはかなり簡単です。変更点は次のとおりです。

vis.css

.y.axis line.tick { opacity: .3; }

vis.js

SVG がどのようにレイアウトされているかという理由で、DOM のグラフの前に軸を移動すると、次のように影響しますz-index。

var gEnter = svg.enter().append("svg").append("g");
gEnter.append("g").attr("class", "x axis");
gEnter.append("g").attr("class","y axis");
gEnter.append("g").attr("class", "bars");

最後tickSizeに、y 軸をメジャーにします-(width - margin.right - margin.left)。

yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickSubdivide(true)
            .tickPadding(5)
            .ticks(10)
            .tickSize(-(width - margin.right - margin.left), 2, 8);
于 2013-01-23T21:11:02.703 に答える