D3.js D3 svg形状的编程defs模式填充

我想创建一个圆形裁剪图像，与svg圆形一起使用，并决定用一个模式填充svg圆形。我让它为单个案例工作：

defs.append("svg:pattern")
    .attr("id", "story1")
    .attr("width", 200)
    .attr("height", 100)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", 'ml-image4.png')
    .attr("width", 200)
    .attr("height", 100)
    .attr('x',0)
    .attr('y',0);

var circle1 = svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 50)
        .attr("r", 40)
        .style("fill", "#fff")
        .style("fill", "url(#story1)")
        .style('stroke','#000')
        .style('stroke-width', 5);

然后我全力以赴，试图适应一个程序化的实现，但结果不是很好。我希望有办法做到这一点，因为我的最终目标是拥有一个使用许多图片作为模式的应用程序。它就像一个小图库，每个svg圆圈在页面上使用

.attr（'x'，函数（d，i）{return 100+i*200}

）隔开，每个圆圈引用不同的模式。模式id是一个数据成员，所以我尝试这样做：

.style（'fill'，function（d）{return“url（#“+d.id+”）；}）

。我不太清楚为什么它不起作用；在我看来，它似乎是功能性的。我确实得到了错误：

未捕获的DomeException:无法在上执行'querySelectorAll' “元素”：“svg:pattern”不是有效的选择器

下面是我对编程def模式的改编，并快速查看我的数据：

var data = [
    {'id':'story1', 'Title':'Title1', 'Date':'03/10/2017','Icon':'Icon1.png', 'Link':'www.link1.com/'},
    {'id':'story2', 'Title':'Title2', 'Date':'12/15/2017','Icon':'Icon2.png', 'Link':'www.link2.com/'}
];

var defs = svg.append('svg:defs');

defs.selectAll(null)
    .data(data)
    .enter()
    .append('svg:pattern')
    .attr('id',function(d) {return d.id; })
    .attr('width', 200)
    .attr('height', 100)
    .attr('patternUnits', 'userSpaceOnUse')
    .append('svg:image')
    .attr('xlink:href', function(d) {return d.Icon})
    .attr('width', 200)
    .attr('height', 100)
    .attr('x',0)
    .attr('y',0);

svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', function(d,i) {return 100+i*200})
    .attr('cy', 50)
    .attr('r',40)
    .style('fill',function(d) {return "url(#"+d.id+")"; })
    .style('stroke','#000')
    .style('stroke-width',3);

问题:

---

从错误判断，我的改编似乎有缺陷。我可以调整什么来获得svg圆的编程模式？依我拙见，我的方法与文章开头的简单案例（1模式1圈）并没有什么不同，我只是想把它放大，这样我就可以使用我的数据使用

d3.selectAll（）

。

删除名称空间：

defs.selectAll（'pattern'）

。更好的是：

defs.selectAll（null）

。其余的似乎没问题，应该可以工作，就像我在这里做的那样：。@GerardoFurtado很好的主意，这让它工作了，我更新了

defs.selectAll（null）

。现在唯一的问题是，每个圆的图像填充都是相同的。不知道为什么这仍然被解读为静态的；“我现在正在用它做实验，”杰拉尔多夫说，“没关系，明白了！谢谢你给我指明了正确的方向！