我如何可以設置在SVG路徑

Question

每條線顏色或寬度我使用的路徑，箱子一個三角形，

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' 
}); 

我如何設置筆觸顏色或寬度的每一行？

謝謝。

Answer 1

正如@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; }); 

我寫了一個小提琴在這裏：http://jsfiddle.net/pnavarrc/9Qqy8/