Closed cnavarreteliz closed 6 years ago
My test code:
const data = [
{
"angle": 0,
"x": 50,
"y": 100
},
{
"angle": 45,
"x": 250,
"y": 100
},
{
"angle": 90,
"x": 450,
"y": 100
},
{
"angle": 135,
"x": 650,
"y": 100
},
{
"angle": 180,
"x": 850,
"y": 100
}
];
new d3plus.Rect()
.data(data)
.rotate(d => d.angle)
.width(50)
.height(50)
.x(d => d.x)
.y(d => d.y)
.fill("red")
.strokeWidth(1)
.label("....Test Label")
.labelBounds({
"x": 10,
"y": -25,
"width": 300,
"height": 50
})
.labelConfig({
padding: 0,
strokeWidth: 2,
textAnchor: "start",
fontColor: "black",
fontSize: 12,
verticalAlign: "middle" // Change between your options
})
.render();
@cnavarreteliz I've just released this fix with d3plus-text v0.9.33. Please test it in d3plus-shape, and the let me know if it solves the issues you were having in Radar!
(closes d3plus/d3plus-shape#83)
Description
This bug was caused when rotation angle was different to zero.
For to solve it, I created a different behavior in for
y
position in textSyle function and inyP
when angle of rotation is different to zero. I tested it usingverticalAlign
:top
,middle
andbottom
.Types of changes
Checklist