如何在不更改坐标的情况下转换(旋转)svg 文本元素? [英] How to transform (rotate) svg text element without changing coordinates?

问题描述

我是这个 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 文本元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！