CODEWITHSUNDEEP
javascriptd3.js
devdropper87
devdropper87

Reputation: 4187

d3 image in circle not rendering properly

This is my first time using d3js. I am inserting images into circles -- i saw other posts on here about using patterns and I worked through it and was able to get the images rendering at a reasonable speed. The problem is that the image is not appearing the way I want it to and I'm not sure why. When I use this image, it becomes really whacky:

enter image description here

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

But when I insert this image in as as the href (in the svg) it is fine: https://i.sstatic.net/5VqOb.png

I suspect this is the offending code. how would I make my circle 'responsive' to image contents?

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

Upvotes: 1

Views: 114

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Nopes the issue is not there where you suspecting

Its inside the defs, instead of this below

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

Give the patternContentUnits="objectBoundingBox" like below:

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

</image></pattern>

Working code here

Hope this helps!

Upvotes: 1

Related Questions