search

d3plus / d3plus-shape

Fancy SVG shapes for visualizations
MIT License
20 stars 2 forks source link

labels are misaligned when rotating shapes #83

Closed davelandry closed 6 years ago

davelandry commented 6 years ago

Expected Behavior

When rotating a shape, the labels should rotate with it.

Current Behavior

Currently, as a shape rotates away from 0, the vertical alignment of the label becomes misaligned. Here is the code inside of Shape.js which sets the label rotation: https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L435-L439

This might actually be an issue with d3plus-text, so maybe test it there if you're hitting a brick wall.

Steps to Reproduce (for bugs)

https://jsfiddle.net/nfd9bo8q/54/

cnavarreteliz commented 6 years ago

I found a brick wall in d3plus-shape, so I'm testing in d3plus-text 😃

cnavarreteliz commented 6 years ago

I mean, I disabled .rotate() in d3plus/shape: https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L467, and the results are: image

So, I think that I can discard an issue related directly with d3plus-shape.

davelandry commented 6 years ago

It's probably related to not only the rotate of TextBox but also the rotateAnchor. I drew a little diagram to make sure we're on the same page:

img_1915

This diagram would have the rotate of the Shape set to 45

cnavarreteliz commented 6 years ago

I was experimenting and I think that the problem is related with rotateAnchor and rotate(angle, cx, cy) in d3plus-text. I hope to have news ASAP.

image