为SVG路径d3 javascript添加边框答案

【问题标题】：Add borders to SVG path d3 javascript为SVG路径d3 javascript添加边框
【发布时间】：2013-12-29 21:37:36
【问题描述】：

我想让我的 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');

【问题讨论】：

你不能用一行来做这个，但是你可以使用path元素来代替。
我明白你在说什么@LarsKotthoff - 有没有办法将我的 lineFunction 代码转换为路径生成器，然后我可以添加边框？
您可以使用区域生成器，对 y0 使用实际 y 坐标，对 y1 使用实际 + 边距。 x 类似。
我认为这是一种比 2 行更优雅的方法——如果你想把它标记为答案@LarsKotthoff

标签： javascript css svg d3.js

【解决方案1】：

一个前瞻性的答案：如果支持 SVG2，您可以使用 paint-order 属性（假设填充是不透明的）：

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

那么就不需要复制path元素，笔触只会在形状外可见。

【讨论】：

【解决方案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');

这意味着您有两条线相互重叠，较低的一条线从另一条线略微突出，给人一种边框的印象。

【讨论】：

有道理——我只是希望有一种方法可以用 css 来做到这一点，而不是重新创建行。谢谢。

【解决方案3】：

您可以通过用path 替换该行来做到这一点。为此，您可以使用 D3 的区域生成器。每个“点”需要两个坐标，但您可以通过将实际坐标传递给x0 并将实际坐标加上一个边距传递给x1（对于y 也是如此）。这个边距将决定线条的“粗细”。您可以像往常一样为路径设置填充/描边。

【讨论】：

你能举个例子吗？
例如d3.svg.area().y0(function(d) { return d.value; }).y1(function(d) { return d.value + 10; })