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。

d3js中的简单哈希模式SVG

1 个答案: