Question

我正在使用D3，并尝试在已经过旋转变换的元素上方添加文本标签。我的问题是如何定位文本而不实际旋转它。

这些是原始元素：

var circle = g.selectAll('.city')
 .data(data).enter()
 .append('circle')
 .attr('class', 'city')
 .attr('r', 10)
 .attr("cy", 0)
 .attr("cx", function(d) {
    return rdist(d.dist);
 }).attr("transform", function(d, i) {
    return "rotate(" + d.radial_pos + " 0 0)";
 });

这就是我在mouseover上附加文本的方式：

circle.on("mouseover", function(d) {
  var cx = d3.select(this).attr('cx');
  var cy = d3.select(this).attr('cy');
  var label = d3.select(this.parentNode)
  .append('text')
  .text(function(d) {
    return d.name;
  }).attr('x', function() {
    return cx;
  }).attr('y', function() {
    return cy;
  }).attr("transform", function() {
    return "rotate(" + d.radial_pos + " 0 0)";
  });
});

这会将标签返回到正确的位置，但整个标签会旋转，因此文字处于某个角度。

有没有什么方法可以先自己转换坐标，然后将文本设置为那些坐标，这样它仍然是正确的方式？或者，我可以以某种方式得到圆圈的渲染位置吗？

Answer 1

似乎在transform元素上删除带有rotation的虚假text属性可以解决问题as shown in this jsFiddle：

circle.on("mouseover", function(d) {
  var cx = d3.select(this).attr('cx');
  var cy = d3.select(this).attr('cy');
  var label = d3.select(this.parentNode)
  .append('text')
  .text(function(d) {
    return d.name;
  }).attr('x', function() {
    return cx;
  }).attr('y', function() {
    return cy;
  });
});

PS：我假设这与问题有关：D3.js: how to append elements when data is already bound?

D3.js：旋转坐标，而不是整个元素？

1 个答案: