13

d3 で折れ線グラフを描いていますが、すべて正常に動作します。ただし、グラフ領域の左側には、y 軸のテキスト ラベルが最も広いと思われるものに合わせて十分な余白を残す必要があります。最も幅の広いラベルに応じて、グラフごとにこのスペースを調整したいと思います。

最初は、y の最大値を見つけて、隠しテキスト オブジェクトを作成し、その幅を計算して、グラフを作成するときにその値を左余白に使用できると考えていました。少し厄介ですが、それは私に価値をもたらします。

ただし、最大の y 値が "1598.538" の場合、一番上の y 軸ラベルは "1500" になる可能性があります...つまり、はるかに狭くなります。

したがって、実際に一番上のラベルになるものの幅を見つけたいと思います。しかし、グラフと軸を描画し、その幅を測定し、実際に再度描画することなしに、それを行う方法は考えられません。これは厄介に聞こえます！これを行う厄介な方法はありますか？

アップデート

これが私のコードの一部で、Lars の提案を使用して、どこに収まるかを示しています。

// I did have
// `.attr("transform", "translate(" + margin.left + "," + margin.top ")")`
// on the end of this line, but I've now moved that to the bottom.
var g = svg.select("g");

// Add line paths.
g.selectAll(".line").data(data)
    .enter()
    .append("path")
    .attr("d", line);

// Update the previously-created axes.
g.select(".axis-x")
    .attr("transform", "translate(0," + yScale.range()[0] + ")"))
    .call(xAxis);
g.select(".axis-y")
    .call(yAxis);

// Lars's suggestion for finding the maximum width of a y-axis label:
var maxw = 0;
d3.select(this).select('.axis-y').selectAll('text').each(function(){
  if (this.getBBox().width > maxw) maxw = this.getBBox().width;
});

// Now update inner dimensions of the chart.
g.attr("transform", "translate(" + (maxw + margin.left) + "," + margin.top + ")");
4

1 に答える 1

6

すべてを要素内に配置し、最大幅に基づいてg設定できます。transformの線に沿った何か

var maxw = 0;
yAxisContainer.selectAll("text").each(function() {
    if(this.getBBox().width > maxw) maxw = this.getBBox().width;
});
graphContainer.attr("transform", "translate(" + maxw + ",0)");
于 2013-06-14T14:02:16.383 に答える