3

これに基づいた棒グラフを使用していて、x軸ラベルを変更したい（ラベルを回転させるか、1つおきまたは3つおきにのみ表示する...ラベルを重ねずに合わせることができるもの） ）。私はこれを調べるのにかなりの時間を費やしましたが、言うのは簡単なようです（私はd3にかなり慣れていませんが）。問題のコードセグメントは次のようなものだと思います。

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

..。

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

..。

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

...上記はマッピングが行われる場所です（「map」関数に基づいていると思います）

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

..。

var state = svg.selectAll(".state")
  .data(data)
.enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

..。

  state.selectAll("rect")
  .data(function(d) { return d.ages; })
.enter().append("rect")
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.y1); })
  .attr("height", function(d) { return y(d.y0) - y(d.y1); })
  .style("fill", function(d) { return color(d.name); });

問題は、チャート内のすべてのバーにx軸ラベルが必ずしも必要ではないことです（乱雑になりすぎます）。私はすでにいくつかの異なる使用方法を試しました

axis.ticks
axis.tickValues
axis.tickSubdivide
axis.tickSize

しかし、d.Stateがそれぞれの列と結婚しているために失敗すると思います（私のグラフでは、州の名前の代わりに日付が使用されています）...何か洞察はありますか？

面倒な質問でごめんなさい。私の質問をより明確にするために私が何を求めているのかを理解している人による編集を歓迎します（私はそれを尋ねる最良の方法がわかりません）。

4

1 に答える 1

7

この線

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

軸が使用するスケールのドメインを設定しています。スケールは順序であるため、軸はデフォルトで目盛りのすべての値を使用します。上記のaxis.tickValues関数を使用して、実際のティック値を設定できるはずです。ドメインを設定するとtickValuesがリセットされると思われるため、スケールドメインを設定する呼び出しの後に設定する必要があります。次のようなものを追加するだけです。

xAxis.tickValues(data.map( function(d,i) 
  { 
    if(i % 2 ===0 ) return d.State; 
  })
    .filter(function (d) 
      { return !!d; } ));

ここでは、データデータを「未定義」が点在する選択された状態値の単一配列にマッピングしてから、すべての未定義を除外しています。残りのState値が目盛りになります。

アンダースコアを使用している場合は、おそらく線をよりきれいにすることができます。

あなたはここで実用的な解決策を見ることができます。

于 2012-11-26T15:33:08.983 に答える