添加边框到SVG路径d3 javascript [英] Add borders to SVG path d3 javascript

问题描述

我想让我的svg路径（线条）有边框，轮廓是黑色的，但里面是另一种颜色。行代码：

I want to have my svg paths (lines) have borders such that outlines are black, but the inside is another color. Line code:

self.lineFunction = function(dat) {
    var self = this
    var line = d3.svg.line().interpolate('linear');
    var data = [];
    dat.map(function(d) {
        data.push([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');

推荐答案

code> path 。为此，您可以使用D3的区域生成器。它需要为每个点两个坐标，但你可以通过将实际坐标传递到 x0 ，实际加上一个边距到 x1 （和y类似）。该边距将确定线的厚度。您可以照常为路径设置填充/描边。

You can do this by replacing the line with a path. For this, you can use D3's area generator. It requires two coordinates for each "point", but you can do this by passing in the actual coordinate to x0 and the actual plus a margin to x1 (and similarly for y). This margin will determine the "thickness" of the line. You can set fill/stroke as usual for the path.

这篇关于添加边框到SVG路径d3 javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！