Plot lines in D3 Area Chart

Question

I am working on creating an Area chart using d3 js library.

Plotting the area chart without the lines has been achieved however, need inputs on how the lines can be drawn to separate the areas.

One way I can think of is to draw lines one by one with the below approach wherein x1 = x2, y1=0 and y2=xy plotted point

svg.append("line")
            .data(data)
        .style("stroke", "#e6e3e3")
        .attr("x1", 30)
        .attr("y1", 0)
        .attr("x2", 30)
        .attr("y2", 40);

Need help with below points. 1. If there is a way to draw the lines in one go (using a function). 2. In case the lines are drawn separately (as explained above) how to calculate the X and Y axis given the dataset below.

var data = [
    {"quarter": "A", "totalIncome": 60 },
    {"quarter": "B", "totalIncome": 70 },
    {"quarter": "C", "totalIncome": 60 },
    {"quarter": "D", "totalIncome": 80 },
    {"quarter": "E", "totalIncome": 75 }
];

Answer 1

I would do something like this :

If you have the points to make the path at the top like so :

var points = { x:0,y:60},{x:50,y:70},{x:100,y:60}.. and so on

And you have data like in the question for the vertical lines. I would make a new array for the 5 lines you want to create like so :

var newLineData = [];
for(i=0;i<data.length;i++){
var thisLine = { x1:i*step,y1:0, x2:i*step,y2:data[i].totalIncome };

newLineData.push(thisLine); //line data

}

Then use this data to create the lines like so :

var link = svg.selectAll(".link")
      .data([newLineData])
    .enter().append("line")
      .attr("class", "link")
      .style('stroke','black')
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });
  //console.log(line);

  link.attr("x1", function(d) { console.log(d); return d.x1; })
        .attr("y1", function(d) { return d.y1; }) 
        //.attr("y1", function(d) { return x[d.y1]; }) if using axis : x is the axis
        .attr("x2", function(d) { return d.x2; })
        .attr("y2", function(d) { return d.y2; });

Here is a fiddle how it would work without axis : https://jsfiddle.net/reko91/knetxt5n/

But if you pass the axis like I have shown above it should go in the correct direction for you :)

Code below too in case JSFiddle goes down.

 var svg = d3.select('#container').append('svg') .attr('width', 500) .attr('height', 500) //.append('g') var data = [ {"quarter": "A", "totalIncome": 60 }, {"quarter": "B", "totalIncome": 70 }, {"quarter": "C", "totalIncome": 60 }, {"quarter": "D", "totalIncome": 80 }, {"quarter": "E", "totalIncome": 75 } ]; var newLineData = []; var step = 50; for(i=1;i<data.length+1;i++){ var thisLine = { x1:i*step,y1:0, x2:i*step,y2:data[i-1].totalIncome }; newLineData.push(thisLine); //line data } var link = svg.selectAll(".link") .data(newLineData) .enter().append("line") .attr("class", "link") .style('stroke','black') .style("stroke-width", function(d) { return Math.sqrt(d.value); }); //console.log(line); link.attr("x1", function(d) { console.log(d); return d.x1; }) .attr("y1", function(d) { return d.y1; }) .attr("x2", function(d) { return d.x2; }) .attr("y2", function(d) { return d.y2; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id='container'> </div>