javascript - d3js 中的简单哈希模式 SVG

Question

我使用 d3js，我有一个基本路径，我想用像 this 这样的阴影填充它.

但我不能用 d3js 做到这一点。 here你可以看到我的带有 def、pattern、style 的简单代码...

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 .