0
私は長いY軸ラベル（温度範囲）でデータをグラフ化しています。ラベルを90度回転させてグラフの端からはみ出さないようにラベルを調整するにはどうすればよいですか？私はラベルの反復に基づいて変換を適用するthis.getBBox（）を使用しようとしましたが、それは動作していないようです。D3.jsお互いをより近くに調整する
ありがとうございます！
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 100, right: 100, bottom: 100, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var categories = {
temperature: ["29-30°C - Red","31-33° C - Green","> 33° C - Blue"],
sleep: ["7 - 8 hours", "5 - 6 hours", "4 or less hours"]
}
var mindate = new Date(2012,0,1),
maxdate = new Date(2012,0,31);
var xScale = d3.time.scale()
.domain([mindate, maxdate]) // values between for month of january
.range([0, width - margin.right]);
var xAxis = d3.svg.axis()
.orient("bottom")
.scale(xScale);
var yKey = "temperature";
var yScale = d3.scale.ordinal()
.domain(categories[yKey])
.rangePoints([0, height]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "yAxis axis")
.call(yAxis)
.selectAll("text")
.attr("x", 10)
.attr("y",20)
.attr("transform", "rotate(90)")
.style("text-anchor", "start")
</script>ここで私が試したものだが、これは多くのラベルを移動していないようです。私はどのように翻訳を使用せずに次の関数の中で "x"を設定するか分からない。
d3.selectAll(".yAxis text")
.attr("transform", function(d,i) {
return "translate(" + -20 + "," + ((this.getBBox().width/(i+2))) + ")rotate(-90)"
})
に私のYSCALEに変更され、d3.scale.ordinalはパディングの設定を持っているということです役立つかもしれません：http://stackoverflow.com/a/40370554/5768908 –