如何在不改变坐标的情况下转换（旋转）svg文本元素？

问题描述：

我是新来的这个d3.js。在这里，我试图使用d3.v3.js库绘制条形图。在这里我面临的问题很少。我试图将度量标签包含在y轴上。但是一旦我改变了-90度的标签，它的位置就会自动改变。如何在不改变坐标的情况下转换（旋转）svg文本元素？

这里是我用来绘制代码：

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)");

输出图像：

enter image description here

任何帮助是极大的赞赏。

如果你提供更多的代码，甚至像拨弄THID https://jsfiddle.net/vintharas/0m9raoj4/ – shareef

将是有用的您是否尝试过使用'文本锚：middle'而不是结束（在测量标签部分）？ – rm4

谢谢你们的回复。对不起，这是我第一次在*上发布查询。我会包括一个jsfiddle。 @ shareef 我已经尝试了文本锚：中间它给了我相同的结果。但是这个时候的位置有点改变了@ rm4。 –

答

你所看到的，现在是预期的结果，因为transform属性的rotate功能绕原点（0,0）的元素，不在其中心附近。

最简单的解决方案是采用滴你attr("x")和attr("y")和定位的文字相同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值：

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>

答

我认为你正在寻找的CSS属性transform-origin https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

如何在不改变坐标的情况下转换（旋转）svg文本元素？

相关推荐