簡單的哈希模式SVG在d3js

Question

我d3js工作，我有一個基本的路徑，我想與孵化像this來填補它。

但我不能d3js做到這一點。 here你可以看到我簡單的代碼與DEF，圖案，風格...

points = [[10, 10], [200, 20], [10, 500]]; 

line = d3.svg.line(); 

    var svg = d3.select("body").append("svg") 
    .attr("width", 600) 
    .attr("height", 500) 
    .attr("margin", 30) 
    .attr("tabindex", 1); 


    var defs = svg.append('defs'); 
defs.append('pattern') 
    .attr('id', 'hash') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', '6') 
    .attr('height', '6'); 

/* var defs = svg.append('pattern'); 
defs 
    .attr('id', 'hash') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', '6') 
    .attr('height', '6');*/ 


path = svg.append("path") 
    .datum(points); 


path.attr("d", function (d) { 
    var lines = new Array(); 

    for (var i = 0; i < d.length; i++) { 
     lines.push([d[i][0], d[i][1]]); 
    } 
    return line(lines); 
}) 
//.style("fill", "red"); 
//.attr("fill", "red") 
.style("fill", "url(#hash)");//url(#hash) 

Answer 1

你有你需要對已經解決的所有部件。你只需要在本例中添加SVG defs這樣的：

var defs = svg.append('defs'); 
var g = defs.append("pattern") 
    .attr('id', 'hash') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', '25') 
    .attr('height', '25') 
    .append("g").style("fill", "none") 
    .style("stroke", "black") 
    .style("stroke-width", 1); 
g.append("path").attr("d", "M0,0 l25,25"); 
g.append("path").attr("d", "M25,0 l-25,25"); 

更新的jsfiddle here。