javascript - 圆形中的 d3 图像无法正确渲染

Question

这是我第一次使用 d3js。我正在将图像插入圆圈中 - 我在这里看到了有关使用模式的其他帖子，并且我完成了它并能够以合理的速度渲染图像。问题是图像没有按照我想要的方式显示，我不确定为什么。当我使用这张图片时，它变得非常古怪:

plunkr:http://plnkr.co/edit/AOBn1Gz5Fypo3ZqsSZDY?p=preview

但是当我将此图像插入 as 作为 href(在 svg 中)时，效果很好: /image/5VqOb.png

我怀疑这是有问题的代码。如何让我的圈子“响应”图像内容？

circle
    .attr("transform", function(d) { return "translate(" + x(d.xloc) + "," + y(d.yloc) + ")"; })
    .attr("r", function(d) { return Math.min(1 + 1000 * Math.abs(d.xvel * d.yvel), 10)+3; });

Answer 1

不，问题不在于您怀疑的地方

它在 defs 内部，而不是下面的

<pattern id="particle" x="0" y="0" height="5" width="5">
  <image x="-36" y="-36" width="96" height="96" xlink:href="/image/GjxwV.png"></image>
</pattern>

给出 patternContentUnits="objectBoundingBox" 如下所示:

<pattern id="particle" patternContentUnits="objectBoundingBox" width="1" height="1">
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/image/yCKBk.png" width="1" height="1">

</image></pattern>

工作代码here

希望这有帮助!