Problem showing images with D3.js/SVG

Problem showing images with D3.js/SVG
0

#1

So I have been stuck on this one for a while now, and could really use some help. The issue boils down to this, I can add the images and set thier position. The problem is the images are not showing up. However, when I open up the developer tools I can see that it did in fact add the img elements, but the background-image tag does not show up. But if I disable any one of the style tags from the developers tool, suddenly the background-image tag appears and the images show up. This simply makes no sense to me. Here is the link:
http://codepen.io/Josh5231/pen/xEvbgL?editors=0010
I could really use some help on this one, I’ve been beating my head against the wall on this one for too long.


#2

What took me to realize what was wrong when I faced this issue was that you actually need to append div for those flags, rather than in the svg canvas.

You are only using the svg to append links instead.

Take a look at what I’ve done in the developer tools:

http://s.codepen.io/neotriz/debug/jrYvjJ


#3

Ok well I changed the code to use divs and I’m still getting the same issue. It seems that the css/style is not being applied unless I mess with the tags in the developers tool :confused:


#4

Hi @Josh5231:

I think I couldn’t replicate your issue in codepen using jsbin:
https://jsbin.com/tuwixureru/edit?html,css,js,output.

Perhaps a unnotified cross-origin HTTP-Request error in codepen (common)?

Also the problem you are describing is common when the styling is incorrectly applied. Can you check for other way to apply the style, or try a different test styling to test it?


#5

Thanks for the tips. It turned out that it was a styling error. I simply changed the css flag statement to call background-image first and position second and now it works just fine. Not sure why, but thanks again :slight_smile: