2

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

但我不能用 d3js 做到这一点。在这里你可以看到我的简单代码，包括 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)
4

1 回答 1

4

您已经拥有解决方案所需的所有部件。您只需要defs像示例中一样添加 SVG：

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 。

于 2013-07-10T11:09:40.967 回答