CODEWITHSUNDEEP
javascriptd3.jssvg
thatOneGuy
thatOneGuy

Reputation: 10612

How to rotate a group of text elements

I have this fiddle : https://jsfiddle.net/thatOneGuy/j0gnm5mw/1/

I have a group of text elements i create like so :

var text = container.append('g').selectAll('text');

text.data(testData).enter()
  .append('text')
  .attr('x', function(d, i) {
    return (i + 1) * 100;
  })
  .attr('y', 100)
  .text(function(d) {
    return d.label;
  })

I try to rotate like so : 

.attr("transform", "rotate(-10)");

I have found a few examples similar to this :

http://bl.ocks.org/mbostock/4403522

They do the following to rotate : 

.selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");

However this still gives the same output.

Upvotes: 2

Views: 57

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

Thanks to @Robert Longson, it has been solved.

I didn't realise you can rotate about a different centre point. So now my rotate function looks like so :

  var thisX = (i + 1) * 100, thisY = 100 ;
  return "rotate(-90," + thisX + ","+ thisY+")";

Updated fiddle : https://jsfiddle.net/thatOneGuy/j0gnm5mw/4/

Upvotes: 2

Related Questions