Accepted answer

First you need to make a line function:

 var line = d3.svg.line()
              .x(function(d) {
                //so that the line is from the middle of the bar
                //here xScale.rangeBand() is the width of the bar
                return x(d) + xScale.rangeBand() + xScale.rangeBand()/2;
              .y(function(d) {
                return y(d) ;

Next is you make line:

  var linePath = svg.append('path')
        'd': line(data),//use the above line function
        'stroke': 'red',
        'stroke-width': 2,
        'fill': 'none'

Working code here

Hope this helps!

Related Query

More Query from same tag