If you want to correctly apply rotation to red and green bars with different angles, make sure to adjust the angle accordingly in your transformation code. Here is an example of how your transformation should look:
.attr('transform', function(d) {
var x = this.getAttribute('x'),
y = this.getAttribute('y'),
z = this.getAttribute('key'),
c = d.color,
a = (c=='green') ? -5 : 0;
if(z>=0)
{
return "rotate ("+ (d.angle+ang0+a) +" "+ x +" "+ y +")"
}else{
return "rotate ("+ (d.angle+a) +" "+ (x) +" "+ (y) +")"
}
Check out the DEMO.
A more effective approach would involve creating groups using <svg:g> tags before adding the rotated bars within them. This ensures that the base of each pair of bars aligns properly despite their differing angles.
You'll need to update your data object to include both red and green values for each group. Then, modify your script to first create the groups and subsequently append the bars. Here's an example snippet:
// Your modified D3.js script here
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width='400' height='400'>
<circle cx='190' cy='190' r='100' fill='none' stroke='red'></circle>
</svg>
To simplify your script further, I made some adjustments such as centering your transformations on the circle's center rather than calculating coordinates based on angles. Adding the radius to the group and bars is all that's needed. You can view the updated version in this DEMO.