0

私はまだ D3 の経験があまりありませんが、投稿者がこのチャートでフィドルを作成した投稿を見つけました (これはここにあります: Need help lining up x axis ticks with bar in D3.js bar chart ) . 月ではなく日を表示するように変更しようとしましたが、そうすると目盛りの位置合わせがずれます。目盛りを揃えて、これがどのように機能するかを理解するのに役立つことを願っていました。

http://jsfiddle.net/MmEjF/32/

ステップを指定するために ticks メソッドを追加しましたが、そうすることでアライメントが外れます。

var xAxis = d3.svg.axis().
scale(xTimeScale).
orient("bottom").
ticks(d3.time.days, 1).
tickFormat(formatDate);
4

1 に答える 1

2

以下を変更するだけです。

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

に：

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

オフセットの最後の引数を 0 ではなく 1 に変更しました。ゼロを指定すると、ドキュメントで説明されているように日付のコピーが返されます。

さらに.、行末に を配置することは慣例ではなく、コードを読みにくくすることを指摘したいと思います。前の例から来ていることはわかっていますが、それに触発されていません。これは次のようになります。

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

これは、動作するコードを含む jsFiddle です: http://jsfiddle.net/chrisJamesC/MmEjF/34/

于 2013-03-11T23:21:02.223 に答える