[Solved]-Adding Error Bars to Grouped Bar Chart with D3.js-d3.js

If you just want straight-line error bars (without top and bottom horizontal lines), yes, you could use an area or line generator (only area generators have y0/y1 methods).

However, you wouldn't call the path generator on all the data at once, you would have to create a selection of paths joined to the data, and then pass the data object as a one (area generator) or two-point (line generator) array to the generator function.

This should work:

var errorBarArea = d3.svg.area()
    .x(function(d) {return x(d.state); })
    .y0(function(d) {return y(d.value - d.moe); })
    .y1(function(d) {return y(d.value + d.moe); })
    .interpolate("linear");

var errorBarSVG = d3.select("body").append("svg")

var errorBars = errorBarSVG.selectAll("path")
         .data(data);

errorBars.enter().append("path");

errorBars.attr("d", function(d){return errorBarArea([d]);}) 
             //turn the data into a one-element array 
             //and pass it to the area function
    .attr("stroke", "red")
    .attr("stroke-width", 1.5);

This will create a zero-width area path for each bar, connecting the +/- points in a straight line.

If you used a line generator function, you would have to calculate the top and bottom Y-values when you turned the data into an array:

errorBars.attr("d", function(d){
                  return errorBarLine([{x:d.x, y:d.value - d.moe},
                                       {x:d.x, y:d.value + d.moe}]);
               })

Alternately, you could use d3.svg.diagonal to create straight-line error bars. A diagonal function is specifically designed to take a single data object and extract start and end line points from it; you would then have to customize the source and target accessor functions to create objects like the ones in the code sample above.

However, if you want a custom-shaped error bar with horizontal top and bottom lines, you'll need to write your own function to create the path "d" attribute based on a data object. I discuss doing that in this answer, for an error bar the shape would actually be much simpler, since it's all just straight lines. You might find this tutorial on the path directions syntax a useful reference.

Finally, you might also want to re-write your bar chart code so that each bar is represented by a <g> element joined to the data, and then you append both the rectangle and the error bar path within it without calculating separate data joins.