1

セット内のドキュメントの発行日を表示するチャートを生成しています。

これらの日付は、日、月、年の間で非常に大きくなる可能性があります。

values = [Mon Jan 01 2001 00:00:00 GMT+0000 (GMT Standard Time), Tue Jan 02 2001 00:00:00 GMT+0000 (GMT Standard Time), ... , Thu Jan 09 2003 00:00:00 GMT+0000 (GMT Standard Time)]

そのため、「d3.layout.histogram」を使用して、ドキュメントの日付を 10 (またはできるだけ近い) ビンにグループ化しています。

var x = d3.time.scale().domain([firstDate, lastDate]).range([0, width]);

var data = d3.layout.histogram()
        .bins(x.ticks(bins))  
        (values);

var formatDate = d3.time.format("%d/%m/%y");
var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickFormat(formatDate);

次に、次のように固定幅 10px (図の A) で長方形のバーを描画します。

bar.append("rect")
        .attr("x", 0)
        .attr("width", function(d) {
            rtnW = 10;          
            return rtnW;
        })
        .attr("height", function(d) { return height - y(d.y); });

幅を動的に設定しようとすると、目盛りが軸を横切って均等に配置されている限り問題ありません。

.attr("width", (width/(x.ticks(bins).length-1))-1)

ただし、目盛りが正確に収まらない場合は、軸の前部と最後部 (図の!) に予備の目盛りが表示され、列幅の計算が行われなくなります。

したがって、質問は次のとおりです。

xAxis の各目盛り間の実際の幅 (図の B) を計算/取得するにはどうすればよいですか? (ティック 1 と 2 の日付を取得できれば、おそらくそれも解決できます。axis.tickValues はこれに役立ちますか??)。

列幅

どうもありがとう！

4

2 に答える 2

2

x スケール .ticks() を使用するための @larskothoff の提案に従って、D3 のヒストグラムによって動的に生成された目盛り間の間隔を見つけるためのこのソリューションを思い付きました。

Lars がコメントで言ったように、ティックの数がわかっている場合は、スケール (x) からティックを取得できます。xAxis から取得できます。

var tickCount = xAxis.ticks()[0];

それを x スケール .tick() に渡して、ティック (スケール上のすべての日付) を返します。

x.ticks(tickCount)

スケールの最初の日付の x 位置を取得するには、その日付をスケールに渡します。

var firstDate = x(x.ticks(tickCount)[0]);

スケールの 2 番目の日付の x を取得するには:

var secondDate = x(x.ticks(tickCount)[1]);

最後に、列幅を計算するには:

var colWidth = secondDate - firstDate;

より簡潔に (そしてパディングのために 1 を削除します):

var colWidth = Math.floor(x(x.ticks(xAxis.ticks()[0])[1]) - x(x.ticks(xAxis.ticks()[0])[0])) - 1;

これは、これまでのすべてのテスト データで機能し、解決策のようです。より堅牢で効率的な方法の提案を歓迎します!

于 2013-07-24T09:15:56.570 に答える