Question

我试过了：

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

但在append("svg:pattern")遇到错误，所以我认为还没有在d3中实现。

我的解决方案是简单地在d3之外运行SVG代码，因为我不需要d3的强大功能。（我意识到我可以将一个.data（数据集）附加到一个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

Answer 2

D3或多或少与你的东西无关 - 你可以生成SVG，HTML等等。 SVG模式没有理由不起作用。从您发布的小代码看起来您可能正在尝试将模式附加到HTML元素。在开始定义模式之前，您必须创建SVG和defs元素。

Answer 3

我确认，您首先必须将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);

可以在D3中实现SVG模式吗？

3 个答案: