如何设置SVG路径中的各行颜色或宽度
如何设置SVG路径中的各行颜色或宽度
提问于 2013-11-28 20:21:42
我使用路径创建一个三角形，
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'
});如何设置每行的笔触颜色或宽度？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-28 20:42:59
正如@Lars所说，您需要使用单独的path元素。此外，您还可以使用行生成器，这样就不必手动创建路径字符串。
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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20266112
复制相关文章
相似问题
腾讯云开发者
