1

D3 散布図の X 軸の幅に問題があります。何が起こっているのかというと、x 軸が割り当てられたスペースを埋めておらず、データがうまく埋められていません。JSfiddle はこちら: http://jsfiddle.net/u4cGJ/

d3 スケールの出力範囲を次のように定義しました。

.range([padding, svgWidth - padding]);

散布図のポイントの出力範囲はこれと完全に一致しますが、x 軸は一致しません。 svg はさらに外側に拡張し、データはそのスペースも埋め、データのセクションは表示されますが、軸のコンテキストには配置されません。

ご協力いただきありがとうございます。

4

1 に答える 1

0

おそらく問題は、定義したドメインにデータの全範囲が含まれていないことです。スケール ドメイン/範囲はデータ値の範囲をマッピングするために使用されるため、ドメインが [0,10] で範囲が [0,100] の場合、range(0) = 0、range(1) = 10 のような値が得られます。 , range(2) = 20... range(10) = 100 (使用するスケールの種類による)。

ドメインを範囲にマッピングするだけなので、マッピングできない値を指定すると、範囲の範囲内の値を取得する可能性は低くなります。例えば。range(11) を実行すると、0 から 100 の間の値は取得されません。範囲値は、軸とプロットが実際の svg を構築するために使用する可能性が高いため、ドメインの外側にあるポイントは終了します。あなたのプロット（またはNaNなど）から離れてください。

データ自体からドメインを導出してみてください。D3 には、これを簡単に行うための最小、最大、およびエクステント関数があります。ポイント オブジェクトの配列がある場合は、アクセサーを関数として使用して、計算で使用する正しい値を提供できます。

次に例を示します。

var data =  [{x:1, y:1}, {x:2, y:4}, {x:3, y:2}, {x:4, y:1}, {x:5, y:2}];
var xExtent = d3.extent(data, function(d) { return d.x; });
var yExtent = d3.extent(data, function(d) { return d.y; });

jsFiddle を参照してください: http://jsfiddle.net/reblace/c9qw8/

あなたのフィドルを見ると、実際にプロットされているものに対して間違ったドメインを使用しているロジックにエラーがあるようです。デフォルトの最小値と最大値を取り除くと、説明している問題が修正されるようです。

function makeScales(xAxisRepresents, domainMinOverride, domainMaxOverride) {
   var domainMin = d3.min(dataset, function datumToValueTransformer(datum) { return datum[xAxisRepresents]; });
   var domainMax = d3.max(dataset, function datumToValueTransformer(datum) { return datum[xAxisRepresents]; });
于 2013-09-11T18:13:03.610 に答える