3

D3 の xAxis に沿って各バーのカスタム値を持つ棒グラフを作成しようとしていますが、tickValues を使用しようと考えました。試してみるために、ダミーデータをいくつか与えましたが、次のようには機能しません。

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

    .tickValues(['hi','b','c','d','e']);

xScale は次のとおりです。

gon.votes.length は、各回答の総投票数の配列であり、機能的には、特定の調査の質問に対していくつのバーがあるかを返すためだけに存在します (これは調査アプリ fyi です)

  var xScale = d3.scale.linear()
    .domain([0,gon.votes.length])
    .range([0,w]);

最後に、私が電話するとき

function(d){ return d.title}

これにより、各バーの適切なタイトルが抽出されます。

また、レンダリングされる xAxis の目盛りの html は次のとおりです: NaN

これを xAxis に沿って配置する方法に関するヒントはありますか? 目盛りを変更しようとしているのは間違ったアプローチですか?

4

1 に答える 1

6

ああ、リニア スケールを使用していたようですね。この場合、ドメインは離散値のセット (タイトルのリスト) であるため、序数スケールが必要です。

作業例： http ://tributary.io/inlet/5775047 軸部分のコードにコメントがあります。

問題は、範囲配列がドメイン配列にあるラベルと同じ数の値を持つ必要があることです。それ以外の場合はリサイクルします。あなたの場合、最初のラベルは 0、次に w、次に 0、次に w などでした。

データの配列からタイトルを動的に取得するには、配列で map メソッドを使用する必要があります。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

動的タイトルの作業例: http://tributary.io/inlet/5775215

于 2013-06-13T16:22:08.657 に答える