Add borders to SVG path d3 javascript

Question

I want to have my svg paths (lines) have borders such that outlines are black, but the inside is another color. Line code:

self.lineFunction = function(dat) {
  var self = this
  var line = d3.svg.line().interpolate('linear');

  var data = dat.map(function(d) {
    return [self.xScale(d[0]), self.yScale(d[1].mean)];
  });

  return line(data);
}

self.lines = self.svg.selectAll('.line')
  .data(d3.keys(self.data), function(d) {return d})
  .enter()
  .append('path')
  .attr('d', function(d) {return self.lineFunction(self.data[d])})
  .attr('class', 'line')
  .style('stroke', 'blue')
  .style('stroke-width', '2')
  .style('fill', 'none');

Answer 1

A forward-looking answer: if SVG2 was supported you could use the paint-order property (assuming the fill is opaque):

.pathWithBorder {
  paint-order: stroke fill;
  stroke-width: 1.8;
  stroke: black;
  fill: blue;
}

Then there's no need to duplicate the path element, and the stroke will only be visible outside the shape.

Answer 2

You can do this by replacing the line with a path. For this, you can use D3's area generator. It requires two coordinates for each "point", but you can do this by passing in the actual coordinate to x0 and the actual plus a margin to x1 (and similarly for y). This margin will determine the "thickness" of the line. You can set fill/stroke as usual for the path.

Answer 3

You have to create a slightly thinner line along the same path:

inner = self.svg
  .selectAll('.inner')
  .data(d3.keys(self.data), function(d) { return d; })
  .enter().append('path')
  .attr('d', function(d) {return self.lineFunction(self.data[d])})
  .attr('class', 'inner')
  .style('stroke', 'black')
  .style('stroke-width', '1.8')
  .style('fill', 'none');

This means you have two lines on top on one another, the lower one slightly protruding from the other, giving the impression of a border.