d3.js - 可以在 D3 中实现 SVG 模式吗？

Question

我试过:

var pattern = d3.select("#container").append("svg:pattern");
pattern.append("svg:defs") ... //and so on

但是在 append("svg:pattern") 上遇到了错误，所以我假设它还没有在 d3 中实现。

我的解决方案是简单地在 d3 之外运行 SVG 代码，这工作得很好，因为我不需要 d3 的强大功能来完成这件作品。 (我意识到我可以将一个 .data(dataset) 附加到一个 SVG 对象并循环遍历它来创建它，但这会无缘无故地花费大量的 d3 努力。)

这是一个完整性检查问题:我在尝试在 d3 中实现 svg 模式时是否遗漏了什么，或者我的解决方案是正确的方法吗？

(感谢 Mike Bostock 提供了如此出色的库。)

Answer 1

在这种情况下，所有的魔力都在 svg 而不是 d3 中。 Take a look at the pocket guide to writing SVG了解 svg 的基础知识。

这是我的解决方案:

var svg = d3.select("body").append("svg");

svg.append("defs").append("pattern")
    .attr('id','myPattern')
    .attr("width", 40)
    .attr("height", 25)
    .attr('patternUnits',"userSpaceOnUse")
    .append('path')
    .attr('fill','none')
    .attr('stroke','#335553')
    .attr('stroke-width','3') 
    .attr('d','M0,0 Q10,20  20,10 T 40,0' );


svg.append('rect').attr('x',10)
    .attr('y',0)
    .attr('width',500)
    .attr('height',200)
    .attr('fill','url(#myPattern)');

View this example working on codepen