添加邊框到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元素，並且筆划僅在形狀外部可見。

Answer 2

您必須沿同一路徑創建一個稍微細一些的線：

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

這意味着你有兩條線在彼此的頂部，下面的一條線略微突出另一條線，給人一種邊框的印象。

Answer 3

您可以通過用path替換該行來完成此操作。 為此，您可以使用D3的區域生成器。 每個“點”需要兩個坐標，但是你可以通過將實際坐標傳遞到x0並將實際加上一個邊距傳遞到x1 （以及類似於y）來實現。 該邊距將決定線的“厚度”。 您可以像往常一樣為路徑設置填充/描邊。