如何在SVG路径中设置每行的颜色或宽度
我用这条路装了一个三角形如何在SVG路径中设置每行的颜色或宽度,svg,d3.js,Svg,D3.js,我用这条路装了一个三角形 svg.append("path").attr("d","M " + x(0) + "," + y(0) + " L " + x(1) + "," + y(1) + " " + x(-1) + "," + y(1) + " " + x(0) + "," + y(0) ).style({ stroke: 'black', 'stroke-width': 1, fill: 'red' }); 如何设置每行的笔划颜色或宽度 谢谢。正如@Lars所说,
svg.append("path").attr("d","M " + x(0) + "," + y(0) + " L " + x(1) + "," + y(1) + " " + x(-1) + "," + y(1) + " " + x(0) + "," + y(0) ).style({
stroke: 'black',
'stroke-width': 1,
fill: 'red'
});
如何设置每行的笔划颜色或宽度
谢谢。正如@Lars所说,您需要使用单独的路径元素。此外,还可以使用线生成器,这样就不必手动创建路径字符串
var data = [
{p: [{x: 100, y: 100}, {x: 200, y: 100}], w: 2, c: 'red'},
{p: [{x: 100, y: 100}, {x: 150, y: 200}], w: 3, c: 'blue'},
{p: [{x: 150, y: 200}, {x: 200, y: 100}], w: 1, c: 'green'}
];
// Line generator
var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
svg.selectAll('path')
.data(data)
.enter().append('path')
.attr('d', function(d) { return line(d.p); })
.attr('stroke-width', function(d) { return d.w; })
.attr('stroke', function(d) { return d.c; });
我在这里写了一个小提琴:你必须创建单独的
路径
元素。所以下一步我应该在后面画另一个三角形来填充颜色?我建议在线条后面创建填充的三角形,这样三角形就不会隐藏线条。考虑接受这个问题,如果它解决了你的问题,那么社区就能知道答案。