I'm trying to do something relatively simple. I'm trying to get the following working in D3:

• Draw an image as an SVG element in its natural width and height.
• Be able to click on this image to draw circles with D3.

I'm stuck on how to draw the image as an SVG element. So far I have:

content.append("image")
    .attr("xlink:href",this.store.image_url);

But how can I get the natural width / height of this element?

I'm trying to do something relatively simple. I'm trying to get the following working in D3:

• Draw an image as an SVG element in its natural width and height.
• Be able to click on this image to draw circles with D3.

I'm stuck on how to draw the image as an SVG element. So far I have:

content.append("image")
    .attr("xlink:href",this.store.image_url);

But how can I get the natural width / height of this element?

• javascript
• svg
• d3.js

1 Answer 1

You can do this with a bit of javascript

var img = new Image();
img.onload = function(){

        img.naturalWidth and img.naturalHeight can be read off within here

};
img.src = this.store.image_url;