0

我正在使用 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)";
 });

这就是我在鼠标悬停时附加文本的方式： 

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

这会返回正确位置的标签，但整个标签会旋转，因此文本是倾斜的。

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

4

1 回答 1

1

似乎删除元素上的虚假transform属性应该可以解决问题，如下面的 jsFiddle 所示：rotationtext

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：当数据已经绑定时如何附加元素？

于 2013-01-23T17:14:06.053 回答