问题描述
我是这个 d3.js 的新手.在这里,我尝试使用 d3.v3.js 库绘制条形图.在这里,我面临着一些问题.我试图在 y 轴上包含度量标签.但是一旦我将标签转换为 -90 度,它的位置就会自动改变.
I'm new to this d3.js. Here I'm trying to draw a bar chart using the d3.v3.js library. Here I'm facing few problems. I have tried to include measure labels onto the y-axis. But once I transform the labels -90 degree its position is automatically changing.
这是我用来绘制的代码:
Here's the code I'm used to drawing:
svg.append("g")
.attr("id","x_axis")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
// .attr("transform", "translate(" + bandSize + ", 0)")
svg.append("g")
.attr("class", "x axis")
.attr("id","dimLabel")
.append("text")
.style("text-anchor", "end")
.attr("x", width/2)
.attr("y", height+55)
.text(dimensionLabels[0]);
svg.append("g")
.attr("id","y_axis1")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
//.attr("transform", "rotate(-90)")
.attr("y", function(d){return y(d3.max(data, function(d) { return d.Metric1; }));});
//Measure Labels
svg.append("g")
.attr("class", "y axis")
.attr("id","measureLabels")
.append("text")
.style("text-anchor", "end")
.attr("x", 0)
.attr("y", height/2)
.text(measureLabels[0]+", "+measureLabels[1])
.attr("transform", "rotate(-90)");
输出图像:
非常感谢任何帮助.
推荐答案
你现在看到的是预期的结果,因为transform
属性的rotate
函数会旋转元素围绕原点 (0,0),而不是围绕其中心.
What you see right now is the expected result, because the rotate
function of the transform
attribute rotates the element around the origin (0,0), not around its center.
最简单的解决方案是删除您的 attr("x")
和 attr("y")
并使用相同的 transform
定位文本>:
The easiest solution is dropping your attr("x")
and attr("y")
and positioning the text using the same transform
:
var width = 300,
height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var text = svg.append("text")
.text("Sum (sales), Sum (quantity)")
.attr("text-anchor", "middle")
.attr("transform", "translate(20," + (height / 2) + ") rotate(-90)")
svg {
border: 1px solid gray;
}
<script src="https://d3js.org/d3.v3.min.js"></script>
另一种解决方案是将 rotate
的中心设置为相同的 x
和 y
值:
Another solution is setting the center of the rotate
to the same x
and y
values:
var width = 300,
height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var text = svg.append("text")
.text("Sum (sales), Sum (quantity)")
.attr("text-anchor", "middle")
.attr("x", 20)
.attr("y", 150)
.attr("transform", "rotate(-90, 20, 150)")
svg {
border: 1px solid gray;
}
<script src="https://d3js.org/d3.v3.min.js"></script>
这篇关于如何在不更改坐标的情况下转换(旋转)svg 文本元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,WP2