本文介绍了如何在 SVG 路径中设置每条线的颜色或宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用路径来创建一个三角形,
I use the path to crate a Triangle,
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'
});
如何设置每条线的描边颜色或宽度?
How can I set the stroke color or width for each line?
谢谢.
推荐答案
正如@Lars 所说,您需要使用单独的路径元素.此外,您可以使用行生成器,这样您就不必手动创建路径字符串.
As @Lars said, you need to use separate path elements. Also, you could use a line generator so you don't have to create the path strings by hand.
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; });
我在这里写了一个小小提琴:http://jsfiddle.net/pnavarrc/9Qqy8/
I wrote a small fiddle here: http://jsfiddle.net/pnavarrc/9Qqy8/
这篇关于如何在 SVG 路径中设置每条线的颜色或宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!