Question

I am using D3, and trying to add a text label above an element that has undergone a rotational transform. My problem is how to position the text without actually rotating it too.

These are the original elements:

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

And this is how I append the text, on 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)";
  });
});

This returns the labels in the right position, but the whole label is rotated, so the text is at an angle.

Is there some way that I can first transform the coordinates themselves, then set the text to those coordinates, so it remains the right way up? Alternatively, can I get the rendered position of the circle somehow?

Answer 1

It seems that removing the spurious transform attribute with rotation on the text element should solve the problem 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: I am assuming this is related to the question: D3.js: how to append elements when data is already bound?