1

積み上げ棒グラフの配置に問題があります。表示されていますが、x 軸であると宣言するのが難しいだけです。ここに jsfiddle があります: http://jsfiddle.net/E2HST/

var xTimeScale = d3.time.scale().
domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
.range([0, width]);

明らかに問題の一部です。私はコードを引っ張ってきましたが、残念ながらそれを完全には理解していないという罠に陥ってしまいました。

var bars = svg.selectAll(".bar")
  .data(data).enter()
  .append("g")
  .attr("class","bar")
  .attr("transform", function(d){
        return "translate("+xTimeScale(d.date)+",0)"
})

d.date がなくなったので d.date を d.year に交換しようとしましたが、エラーが発生しています。どんな助けでも大歓迎です。

4

1 に答える 1

2

簡単な答えは、data配列内のオブジェクトにdateキーがないため、xTimeScaleドメインが定義されていないということです。これを修正する簡単な方法は、データ項目ごとにこのキーを作成することです。

data.forEach( function(d) { d.date = new Date(d.year, 0, 1); });

これにより、year変数の 1 月 1 日として日付が作成されます。これは基本的に x 軸の問題を解決します。

ただし、年単位のデータしかないため、データは順序スケールを使用する方が適していることをお勧めします。

その他のいくつかの小さなこと：

  • x 軸の定義の目盛りが多すぎます。これを変更することを検討してください
  • .axis読みやすさを向上させるために、要素にcss スタイルを追加することを検討してください

これらのわずかな変更を加えた更新されたフィドルは、http://jsfiddle.net/E2HST/1/にあります。

于 2013-08-20T01:22:55.347 に答える