将边框添加到SVG路径d3 javascript

我想让我的svg路径（线条）具有边框，使轮廓为黑色，但内部为另一种颜色。线路代码：将边框添加到SVG路径d3 javascript

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

来源

2013-12-11 mike

你不能用一行代码完成这项工作，但你可以使用'path'元素代替。 –

我明白你在说什么@LarsKotthoff - 有没有办法将我的lineFunction代码转换成路径生成器，然后我可以添加边框？ – mike

您可以使用面积发生器，使用y0的实际y坐标，y1使用实际的+ margin。与x类似。 –

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

来源

2013-12-11 20:21:33

你能举个例子吗？ – Nidheesh

E.g. （函数（d）{return d.value;}）。y1（函数 –

你必须创建沿着相同的路径稍薄的线：

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

这意味着你必须在最上面两行彼此，下一个稍微从另一个突出，给人一种边界的印象。

来源

2013-12-11 18:38:00 Jivings

有道理 - 我只是希望有一种方法可以做到这一点用CSS来重新创建线条。谢谢。 – mike

@mike没问题:) – Jivings

具有前瞻性的答案：如果SVG2得到了支持，你可以使用paint-order属性（假设填充是不透明的）：

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

那么就没有必要重复path元素，只有行程会在形状之外可见。

来源

2013-12-12 11:44:28

将边框添加到SVG路径d3 javascript

回答

相关问题