Hi Thanks to FernOfTheAndes for answering this. I have another query. Please see FIDDLE and original question below.
My question is, how do I add text labels to the example below. Ideally I would like the values to be displayed in the rectangles. However, for stacked bar graphs the process seems to be different in that, nested array information doesn't seem to be picked up.
For example
var dataset = [
[{
x: 0,
y: 20 // test with different values
}],
[{
x: 0,
y: 30 // test with different values
}],
[{
x: 0,
y: 50 // test with different values
}]
];
How do I get 20, 30 , 50 to be displayed in their respective rectangles?
Grateful if someone could update the FIDDLE or paste the full code of what I need to do in order to add the text labels.
Original code below: D3 Horizontal stacked bar chart axis cut off
FIDDLE: http:// jsfiddle.net/zDkWP/
Many thanks,
Here is what you need to do. Since you already have groups as your nodes, you just need to append text elements to them, using the same scale that you used for the rectangles. To place your text within the rectangles, you will need a little offset on both x and y, particularly on y. For demo purposes, I hardcoded an offset for the y by adding 20 to it, but you should user smarter offsets for both dimensions.
var text = groups.selectAll("text")
.data(function (d) {
return d;
})
.enter()
.append("text")
.attr("class","text")
.attr("x", function (d) {
return xScale(d.y0); // could use an offset here as well...
})
.attr("y", 70) // just added 20 as an offset...for demo purposes
.text(function(d) { return d.y;});
And a little CSS to help:
.text {
fill: white;
}
Updated FIDDLE.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments