score:1

Accepted answer

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>


Related Query

More Query from same tag