Javascript D3.js力直接图-png'；s在圆圈中-使图像成为圆形

昨天我问了这个问题，得到了非常感谢的杰拉尔多

该示例使用了透明背景的图像（请参见下面的Opera和Chrome图像），效果不错。但是，我想提供适合圆圈内部的方形图像

我在CSS和引导循环图像中尝试了边界半径，但这些都不起作用——可能是因为它是一个标记而不是一个标记

下面是有帮助的呈现标记

  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="female1.png" class="circle-image" height="40" width="40" x="-20" y="-20"></image>

将其设置为模式会有帮助吗？

您可以使用SVG：

然后，在你的圈子里：

.attr("fill", "url(#foo")

下面是一个演示：

var宽度=400；
var高度=300；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var defs=svg.append（“defs”）；
defs.append（'模式'）
.attr（“id”、“狗”）
.attr（“宽度”，1）
.attr（“高度”，1）
.append（“svg:image”）
.attr（“xlink:href，”http://cdn2-www.dogtime.com/assets/uploads/2010/12/senior-dog-2.jpg")
.attr（“宽度”，100）
.attr（“高度”，100）
.attr（“y”，-20）
.attr（“x”，-20）；
defs.append（'模式'）
.attr（“id”、“cat”）
.attr（“宽度”，1）
.attr（“高度”，1）
.append（“svg:image”）
.attr（“xlink:href，”https://s-media-cache-ak0.pinimg.com/736x/92/9d/3d/929d3d9f76f406b5ac6020323d2d32dc.jpg")
.attr（“宽度”，120）
.attr（“高度”，120）
.attr（“x”，-30）
.attr（“y”，-10）；
var节点=[{id:“foo”}，{id:“bar”}，{id:“baz”}，{id:“barbaz”}]；
变量边=[{
“来源”：0，
“目标”：1
}, {
“来源”：0，
“目标”：2
}, {
“来源”：0，
“目标”：3
}];
var simulation=d3.forceSimulation（）
.力（“连杆”，d3.力连杆（）.距离（80））
.力（“电荷”，d3.力人体（）.力（-100））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
var links=svg.selectAll（“foo”）
.数据（边缘）
.输入（）
.附加（“行”）
.style（“笔划”，“#ccc”）
.样式（“笔划宽度”，1）；
var node=svg.selectAll（“foo”）
.数据（节点）
.输入（）
.附加（“g”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
var nodeCircle=node.append（“圆”）
.attr（“r”，30）
.attr（“笔划”、“灰色”）
.attr（“笔划宽度”，“2px”）
.attr（“填充”，函数（d，i）{
返回i%2==0？“url（#dog）”：“url（#cat）”
});
var text=node.append（“文本”）
.样式（“填充”、“黑色”）
.attr（“dx”，36）
.attr（“dy”，8）
.文本（功能（d）{
返回d.id；
});
模拟。节点（节点）；
模拟力（“链接”）
.连接（边缘）；
simulation.on（“tick”，function（））{
links.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
})
node.attr（“transform”，“d）=>“translate”（“+d.x+”，“+d.y+”））
});
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}

---

这是昨天的问题。我不是在问：你想要图像是圆形还是方形？我想要图像是圆形。方形图像没有透明背景。这有意义吗？这些圆圈是svg吗？如果是，看看是否有帮助。

.attr("fill", "url(#foo")