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?
Share
Improve this question
asked
Jul 29, 2014 at 2:52
Jamie
Jamie
2,30111 gold badge2222 silver badges3838 bronze badges
Add a ment
|
1 Answer
1
Reset to default
7
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;