d3線チャート文字列ドメインx軸

私は比較的新しいD3です。なぜ何かが動作していない理由を理解できません。 d3で線グラフを描画したいので、私は軸に問題があります。次のコードは、それは間違ってどこかに行くと、私が解決する方法を見ないでd3線チャート文字列ドメインx軸

...

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軸に文字列が必要です。（「オランダ」、「イングランド」、「ベルギー」）。

d.ageが整数の場合、d.ageが文字列であれば何も描画されないので、グラフを描画します。

また、序数を使用するために線形の代わりに試しましたが、これは不正なグラフを示しました。（奇妙な見た目の線...）。

誰かが私を助けてくれることを願っています。

出典

2013-03-22 Vincent Hogendoorn

軸にカテゴリ値を使用する場合は、カテゴリ（序数）の縮尺が必要です。 the documentationをご覧ください。あなたのコードは、これは文字列値を抽出するためにmapを使用することに注意してください

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

ようになります - これは、以上の詳細についてはhereを参照してください、あなたの特定のブラウザに実装してもしなくてもよいです。

出典

2013-03-22 14:53:03

ありがとうはあなたの反応のためである、（ラインなどをループする）..私は私が順序尺度を必要と知っていたが、これは、このような奇妙なチャートを与えました。しかしrangeRoundBandsの代わりにrangeを使用しました。これで問題は解決しました（今はポイントとx軸が同じレベルにないという少しの問題しかありません）。 –

rangeBandsの代わりにrangeRoundBandsを使用する理由は何ですか？アンチエイリアスアーチファクトを避けているようですが、別の理由があるかどうかはわかりません。ありがとう。 – yoyodunno

それが唯一の理由です。 –

使用

var x = d3.scale.ordinal().rangePoints([0, width]);

ここではフィドルリンク http://jsfiddle.net/sk2Cf/

出典

2013-09-02 18:15:27 gunjan

あなたの反応に感謝します。これはすでに上記のソリューションで解決されていましたが、あなたが提供したこのソリューションも機能しました。私はこれを念頭に置いておきます。 –

ありがとう！より洗練されたソリューションを想像することはできませんでした。 –

私はちょうどこの質問を見つけ、フィドルを試しましたが、私のコードで現在持っているのと同じ問題があります：グラフのx位置はxスケールラベルのx位置と同じではありません。補間を取り除くと、より良い結果が得られます。線のx位置は、棒グラフの場合、棒の左上の位置になります。 – kel

d3線チャート文字列ドメインx軸

答えて

関連する問題