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');

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');

• javascript
• css
• svg
• d3.js

• You can't do this with a single line, but you could use a path element instead. – Lars Kotthoff Commented Dec 11, 2013 at 18:53
• I see what you're saying @LarsKotthoff -- is there a way to convert my lineFunction code into a path generator that I can then add a border to? – mike Commented Dec 11, 2013 at 19:10
• You could take the area generator, use your actual y coordinate for y0 and for y1 take the actual + a margin. Similar for x. – Lars Kotthoff Commented Dec 11, 2013 at 19:15
• I think this is a more elegant approach than 2 lines -- I'd rather mark this as the answer if you'd like to make it one @LarsKotthoff – mike Commented Dec 11, 2013 at 19:48

3 Answers 3

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.

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.

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.