4

X 軸の数値の代わりに、属性名を設定したいと考えています。私は Javascript のヒーローではありません。散布図を使用しています。

私はそれが次のようなものであるべきだと信じています:

chart.xAxis.tickFormat(d3.format(String));

そして、私は設定することができます:

chart.xAxis
  .axisLabel('Attributes').staggerLabels(true).tickValues(["A", "B", "C"]);;

次に、値を設定します。

data[i].values.push({
 x : "A" ,
       y : 29.765957771107,
    size: Math.random(), 
    shape: shapes[j % 6]
     } , ..

x 軸に属性 "A"、"B" などを表示するにはどうすればよいですか? nvd3 ソース コードも参照しましたが、適切な API 呼び出しが見つかりませんでした。

4

3 に答える 3

1

棒グラフを縦棒グラフに回転させるには、x を y に入れ替える必要があります。ただし、いくつかの小さな偶発的な変更も必要です。これは、ggplot2 のような高レベルの視覚化文法を使用するのではなく、SVG を直接操作するコストです。一方で、SVG はより優れたカスタマイズ性を提供します。SVG は Web 標準であるため、要素インスペクターなどのブラウザーの開発者ツールを使用したり、視覚化以外の目的で SVG を使用したりできます。

x スケールを y スケールに名前変更すると、範囲は [0, 幅] ではなく [高さ, 0] になります。これは、SVG の座標系の原点が左上隅にあるためです。ゼロ値をチャートの上部ではなく下部に配置する必要があります。同様に、これは、以前は「幅」のみを設定する必要があったのに対し、「y」属性と「高さ」属性を設定してバー四角形を配置する必要があることを意味します。(「x」属性のデフォルト値はゼロで、古いバーは左揃えでした。)

var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.range([0, 1, 2, 3, 4, 5]);

各バーの位置を手動で列挙するのは面倒なので、代わりに、rangeBands または rangePoints を使用して、連続した範囲を個別の値のセットに変換できます。rangeBands メソッドは、棒グラフのように、グラフ領域を等間隔で等サイズのバンドに分割するように範囲値を計算します。同様の rangePoints メソッドは、散布図のように等間隔の範囲値を計算します。

例えば：

 var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.rangeBands([0, width]);

詳細については、http://bost.ocks.org/mike/bar/3/ をクリックしてください。

于 2014-12-03T05:25:37.773 に答える
1

私も同じ問題を抱えてる。私の簡単な解決策は、x 軸を宣言するコードを避けることです。nvd3 Web にもこのソリューションがあります。例については、http ://nvd3.org/livecode/index.html#codemirrorNav を参照してください。

于 2014-02-25T22:41:34.363 に答える