4

X 軸と Y 軸の両方のラベルの作成に成功しました。グラフにタイトルを追加することにも成功しました。私の問題は、グラフの余白を変更すると、ラベルの位置がめちゃくちゃになることです。

グラフの余白を変更する場所のスニペット: 

    var margin = {top: 60, right: 60, bottom: 60, left:120}

ラベルを作成する場所のスニペット: 

    //Create Title 
    svg.append("text")
    .attr("x", w / 2 )
    .attr("y", 0)
    .style("text-anchor", "middle")
    .text("Title of Diagram");

    //Create X axis label   
    svg.append("text")
    .attr("x", w / 2 )
    .attr("y",  h + margin.bottom)
    .style("text-anchor", "middle")
    .text("State");

    //Create Y axis label
    svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0-margin.left)
    .attr("x",0 - (h / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Revenue");

JsFiddle:
http://jsfiddle.net/u63T9/

これは、私が喜んで受け入れる別の選択肢
です。基本的に、スケールを利用してベース座標を見つけています。次に、場所に満足するまで、追加または少し取ります。この方法は、実際に余白の変化に対応しています。

    //Create title 
    svg.append("text")
    .attr("x", w / 2 )
    .attr("y",  yScale(d3.max(input, function(d) { return d.CustomerCount; })) - 20 )
    .style("text-anchor", "middle")
    .text("Title of Graph");

    //Create X axis label   
    svg.append("text")
    .attr("x", w / 2 )
    .attr("y",  yScale(0) + 40 )
    .style("text-anchor", "middle")
    .text("State");

    //Create Y axis label
    svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", xScale(0) - 80 )
    .attr("x",0 - (h / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Revenue");
4

1 に答える 1

12

簡単な関数を使用してテキストを測定し、それに基づいて余白を計算します。

// create a dummy element, apply the appropriate classes,
// and then measure the element
function measure(text, classname) {
  if(!text || text.length === 0) return {height: 0, width: 0};

  var container = d3.select('body').append('svg').attr('class', classname);
  container.append('text').attr({x: -1000, y: -1000}).text(text);

  var bbox = container.node().getBBox();
  container.remove();

  return {height: bbox.height, width: bbox.width};
}

今、あなたは使用することができます

var titleSize = measure('my title', 'chart title'),
    margin.top = titleSize.height + 20; // add whatever padding you want

http://jsfiddle.net/uzddx/2/で例を更新しました。タイトルのフォント サイズを変更すると、上部余白のサイズが変更されます。ラベルが y 軸からそれほど離れないように、左マージンに対して同様のことを行うことができます。

于 2013-01-30T22:54:41.960 に答える