javascript - 将边框添加到 SVG 路径 d3 javascript

Question

我想让我的 svg 路径(线条)有边框，这样轮廓是黑色的，但内部是另一种颜色。线路代码:

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

前瞻性答案:如果支持 SVG2，您可以使用 paint-order属性(假设填充是不透明的):

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

这样就不需要复制 path 元素，笔画只会在形状外可见。