javascript - Creating labels on STACKED GROUP bar chart in d3.js -
i have stacked group bar chart. every bar in group having stacked columns . need print labels(text) on every bar in chart. able print 1 label per group. code looks this,
svg.append("g") .attr("class", "y axis") .call(yaxis); var project_stackedbar = svg.selectall(".project_stackedbar") .data(data) .enter().append("g") .attr("class", "g") .attr("transform", function (d) { return "translate(" + x0(d.month) + ",0)"; }); project_stackedbar.selectall("rect") .data(function (d) { return d.columndetails; }) .enter() .append("rect") .attr("width", x1.rangeband()) .attr("x", function (d) { return x1(d.column); }) .attr("y", function (d) { return y(d.yend); }) .attr("height", function (d) { return y(d.ybegin) - y(d.yend); }) .style("fill", function (d) { return color(d.name); }); project_stackedbar.append("text") .attr("x", function (d) { return x1(d.column) }) .attr("y", function (d) { return y(d.yend) - 6;}) .text(function (d) { return (y(d.yend)); } );
thanks in advance.
you have assign data want print in terms of text labels doing following:
project_stackedbar.selectall("text") .data(function (d) { return d.columndetails; }) .enter() .append("text") .attr("x", function (d) { return x1(d.column) }) .attr("y", function (d) { return y(d.yend) - 6;}) .text(function (d) { return (y(d.yend)); } );
the x , y positions may need adjusted.
hope helps.
Comments
Post a Comment