1

我试过:

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提供了这样一个令人难以置信的图书馆。)

4

3 回答 3

3

在这种情况下,所有的魔法都在 svg 而不是 d3 中。查看编写 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)');

查看这个使用 codepen 的示例

于 2015-06-16T10:47:03.690 回答
2

D3 或多或少不知道你在用它做什么——你可以生成 SVG、HTML 等等。没有理由为什么 SVG 模式不起作用。从您发布的小代码看来,您可能正在尝试将模式附加到 HTML 元素。defs在开始定义模式之前,您必须创建 SVG 和元素。

于 2013-01-30T18:44:32.720 回答
1

我确认,您首先必须将 defs 元素添加到您的 SVG 中,然后将您的模式添加到其中。

//first create you SVG or select it
var svg = d3.select("#container").append("svg");

//then append the defs and the pattern
svg.append("defs").append("pattern")
    .attr("width", 5)
    .attr("height", 5);
于 2013-03-07T03:29:03.553 回答