如何在SVG路径中设置每一行的颜色或宽度 [英] How can I set the each line color or width in SVG path

问题描述

我使用路径创建三角形，

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路径中设置每一行的颜色或宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！