Javascript 圆圈中的d3图像未正确渲染

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

普朗克：

但是，当我将此图像作为href（在svg中）插入时，它很好：

我怀疑这是违规代码。我如何使我的圈子对图像内容“有反应”

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; });

---

不，问题不在你怀疑的地方

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

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

工作代码

希望这有帮助

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

</image></pattern>