用图像填充D3节点圆的最好方法是什么？
用图像填充D3节点圆的最好方法是什么？
提问于 2014-07-09 05:05:08
在尝试向大师学习时，我看到Bostock生成了以下代码：
<circle transform="translate(651,665)" class="g-person-target" r="22.5" style="stroke-width: 5px;"></circle>创建the elements in this example。
但是他是从哪里得到真人的照片的呢？但我看不出来。
只是寻找最好的方式来动态添加图像(而不是一个单一的，固定的图像)到一个力量布局的节点，例如Facebook个人资料图片。
回答 2
Stack Overflow用户
发布于 2014-07-09 08:05:59
不知道这是不是“最好的”，但是this approach seems to work。
groups.append("image")
.attr("xlink:href", "http://graph.facebook.com/hannahymiller/picture?type=small")
.style
'clip-path': 'url(#clip)'仍然有兴趣知道是否有更优化的解决方案。
Stack Overflow用户
发布于 2015-07-25 06:53:28
我想他就是从这里得到这些图片的
http://graphics8.nytimes.com/newsgraphics/2013/01/07/movie-network/72ae3b8d92ecc7a67c00babd2a75f34bfdacb3a7/mugs.jpg
在这部分代码中
personDot.append("image")
.attr("xlink:href", "http://graphics8.nytimes.com/newsgraphics/2013/01/07/movie-network/72ae3b8d92ecc7a67c00babd2a75f34bfdacb3a7/mugs.jpg")
.attr("x", function(d, i) { return -mugDiameter / 2 - mugDiameter * (i % 9); })
.attr("y", function(d, i) { return -mugDiameter / 2 - mugDiameter * (i / 9 | 0); })
.attr("width", 9 * mugDiameter)
.attr("height", 6 * mugDiameter)
.attr("clip-path", "url(#g-mug-clip)")
.style("pointer-events", "none");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24641599
复制相关文章
相似问题
腾讯云开发者
