d3圖像圈不能正確渲染

這是我第一次使用d3js。我將圖片插入到圓圈中 - 我在這裏看到了有關使用圖案的其他帖子，並且我通過了它並能夠以合理的速度獲取圖片渲染。問題是圖像沒有以我想要的方式出現，我不知道爲什麼。當我使用這個形象，它變得很古怪：d3圖像圈不能正確渲染

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

但是當我在爲插入當前圖像作爲HREF（在SVG）它是好的： http://i.stack.imgur.com/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; });

來源

2015-11-05 devdropper87

Nopes這個問題是不存在的，你懷疑

其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>

給這個patternContentUnits="objectBoundingBox"象下面這樣：

<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>

工作代碼here

希望這有助於！

來源

2015-11-05 05:50:29 Cyril

d3圖像圈不能正確渲染

回答

相關問題