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

我是d3.js的新手。在这里，我尝试使用d3.v3.js库绘制一个条形图。在这里，我面临着一些问题。我尝试将测量标签包括在y轴上。但一旦我将标签变换为90度，它的位置就会自动改变

以下是我用来绘制的代码：

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

输出图像：

---

非常感谢您的帮助。

我想您正在寻找css属性

transform origin

---

您现在看到的是预期结果，因为

transform

属性的

rotate

函数会围绕原点（0,0）而不是围绕其中心旋转元素

最简单的解决方案是删除

attr（“x”）

和

attr（“y”）

并使用相同的

变换定位文本：


var宽度=300，
高度=300；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var text=svg.append（“文本”）
.text（“总额（销售额）、总额（数量）”）
.attr（“文本锚定”、“中间”）
.attr（“变换”、“平移（20）”+（高度/2）+“旋转（-90）”）
svg{
边框：1px纯色灰色；
}
如果您提供更多的代码，甚至像这样的小提琴，您是否尝试使用
文本锚定：中间
而不是末端（在测量标签部分）？谢谢大家的回复。很抱歉，这是我第一次发布有关Stackoverflow的查询。我将包括一个jsfiddle。@我试过文本锚：中间，它给了我同样的结果。但是这个时间位置有一点改变@rm4。你希望标签在哪里？也许你也可以尝试“开始”而不是“结束”。我希望标签位于y轴的左侧。我试了所有的方法。attr（“变换”、“旋转（-90）”）此行从左到右更改位置。你能帮我解决这个问题吗