1

ラベル/軸/タイトルなどをD3棒グラフに追加しようとしています。適切なサイズに近いものを取得できますが、最後のバーの一部が切り取られてしまいます（したがって、最後のバーは他のバーよりも細くなります）。関連するコードは次のとおりです。

var x = d3.scale.linear()
.domain([0, object.data.length])
.range([0, object.width]);
var y = d3.scale.linear()
.domain([object.min-(object.max-object.min)*.15, object.max (object.max-object.min)*.15])
.rangeRound([ object.height - 30, 0]);

var vis = d3.select(object.ele)
    .append("svg:svg")
    .attr("width", object.width)
    .attr("height", object.height)
    .append("svg:g");

vis.selectAll("g")
.data(object.data)
.enter().append("rect")
.attr("x", function(d, i) { return x(i); })
.attr("y", function(d) { return object.height - y(d.value); })
.attr("width", object.width/object.data.length - 1)
.attr("height",  function(d) { return y(d.value); })
.attr("transform", "translate(30,-30)");

現時点では、すべて（ラベル、軸など）は30pxです。グラフを正しく変更して、他に必要なもののためのスペースを確保するにはどうすればよいですか？

4

1 に答える 1

2

x座標の変換を使用しているため、最後のバーを切り取っていますが、xの範囲は、余分な30ピクセルを除いた幅のみです。

また、yドメインを単純化して.domain（[object.min、object.max]）を使用し、「y」関数と「height」関数を逆にする方が簡単な場合もあります。このようにして、y（d.value）でrectを開始し、その高さをobject.height --y（d.value）にします。

最初に3つのグループを作成します。1つはy軸用、1つはx軸用、もう1つはバー用です。最後のグループ内にバーを描画してから、個々のバーではなく、グループ全体を変換します。object.widthとobject.heightのサイズを増やして、必要な合計スペースに一致させます。

于 2012-09-06T22:07:09.783 に答える