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

您必须沿同一路径创建一条稍微细一点的线：

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 2

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

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

然后不需要复制path元素，并且笔划只会在形状外部显示。

Answer 3

您可以使用path替换该行来执行此操作。为此，您可以使用D3的区域生成器。它需要为每个“点”设置两个坐标，但是您可以通过将实际坐标传递到x0并将实际加上一个边距传递给x1（以及类似于y）来实现。该边距将决定线的“厚度”。您可以像往常一样为路径设置填充/描边。

添加边框到SVG路径d3 javascript

3 个答案: