CODEWITHSUNDEEP
jqueryd3.js
Jean-François Savard
Jean-François Savard

Reputation: 21004

How to add a line at top of stacked bar chart with d3.js?

I was able to come to a result near what I want : 

state.selectAll("line")
     .data(function(d){
         return d.amount;
     })
     .enter().append("line")
     .attr("x1", 0)
     .attr("y1", function(d){                            
        return Math.min(y(d.y1), y(d.y0));
      })
      .attr("x2", width)
      .attr("y2", function(d){
         return Math.min(y(d.y1), y(d.y0));
      })
      .attr("stroke-width", 1)
      .attr("stroke", "black")
      .attr("stroke-dasharray", "5,5");

But it display a line at top of each stack while I want line at top of each bar. I understand why my code add a line for each stack, but I was not able to figure out if d3 would allow me to do that easily.

How would I iterate over each bar and add a line at top of these instead of iterating over datas and adding a line at top of each stack ?

I tried with jQuery but could not get it to work..

Note that the line must cross the entire chart (start at the x(0) on xaxis, and goes to infinite)

A picture worth 1000 words :

enter image description here

Upvotes: 0

Views: 245

Answers (1)

Oleg
Oleg

Reputation: 9359

You should draw the lines based on data. That's the whole point of D3 (and it's usually faster).

I'm not sure how you draw the chart, there's no relevant code in the question, but...

If you were able to display individual stacks (I'm assuming you want to display lines on top of stacks, which are collections of rectangles), then you should have no problem displaying lines on top of them.

Without looking at your data, I can only guess... but here's the basic algorithm:

  1. Iterate over the number of stacks
  2. Calculate the sum of values of individual elements within each stack
  3. Draw lines with y values at those sums (scaled with your chart's yScale)

Upvotes: 2

Related Questions