9

私は D3 に比較的慣れていないため、何かが機能していない理由がわかりません。d3 で折れ線グラフを描きたいのですが、これはうまくいきますが、軸に問題があります。

次のコードでは、どこかで問題が発生し、解決方法がわかりません...

var x = d3.scale.linear()
.range([0, width]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

x.domain(d3.extent(data, function(d) { return d.age; }));

d.ageが整数の場合(1;2;3など)、うまく機能します。しかし、x軸に文字列が必要です。のように("netherlands", "England", "Belgium")。

したがって、d.ageが整数の場合、グラフは正常に描画されます。d.age が文字列の場合、何も描画されません。

また、線形の代わりに序数を使用しようとしましたが、これにより誤ったチャートが得られました。（変な線…）。

4

2 に答える 2

18

軸でカテゴリ値を使用する場合は、カテゴリ (順序) スケールが必要です。ドキュメントをご覧ください。あなたのコードは次のようになります

var x = d3.scale.ordinal().rangeRoundBands([0, width]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");

x.domain(data.map(function(d) { return d.country; }));

これは文字列値を抽出するために使用されることに注意してください。これはmap、特定のブラウザで実装されている場合と実装されていない場合があります。詳細については、こちらを参照してください。

于 2013-03-22T14:53:03.023 に答える