How to add image (eg. jpg) from an URL to a d3 generated graph

[Lee]

Hi everyone,

I'm working on a project which utilises d3 for it's graphical
representation.
We need to add images like .jpg/.png to some image holder elements
created by d3.
Is there a special method to do this?

Our try was something like this:


// Code Start
d3.selectAll("#infoBox").append("svg:rect")
.attr("id", "infoBoxImageHolder")
.attr("http://www.w3.org/1999/xlink", "xlink:href",
"http://www.e-pint.com/epint.jpg")
.attr("class", "bar")
.attr("width", 150)
.attr("height", 200)
.attr("transform", "translate(320, 220)")
// Code End

Firebug console gives this error message:

// Code Start
String contains an invalid character" code: "5
file:///C:/Users/Leo/Desktop/FH/6%20Semester/WikiTimeline/Projekt/Repository/trunk/d3_Dummy/lib/d3.js
Line 1339
// Code End

What are we doing wrong? Is there something like that?

//Code Start
//Image fot the Portrait
var portraitImage = new Image();
portraitImage.src = "http://www.e-pint.com/epint.jpg"

d3.selectAll("#infoBox").append("svg:rect")
.attr("id", "infoBoxImageHolder")
.attr("class", "bar")
.attr("width", 150)
.attr("height", 200)
.attr("transform", "translate(320, 220)")
.attr("appendChild", portraitImage)
//Code End



Couldn't find anything that helped.

Thx very much for helping out :-)

So long, Lee

[Mike Bostock]

Yes, you can use svg:image elements:

http://www.w3.org/TR/SVG/struct.html#ImageElement

For example:

d3.selectAll("#infoBox").append("svg:image")
.attr("xlink:href", "http://www.e-pint.com/epint.jpg")
.attr("width", 150)
.attr("height", 200);

D3 knows about various namespaces already (see d3.ns), so you just
have to specify the prefix.

Mike

[Lee]

Thank you very much....it works just fine :-)

[Tim Triche, Jr.]

similar question: how can I automatically make something like the SVG for a chord plot linked to itself so that the user can download and save a copy as an image?

I see this answer for protovis:

http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem/4228053#4228053

Is there a trivial way to do the same thing for d3?  

thanks

--t

--

If people do not believe that mathematics is simple, it is only because they do not realize how complicated life is.

John von Neumann

[Mike Bostock]

> Is there a trivial way to do the same thing for d3?

Hey, that's a neat trick. Here's an example you can paste into your console:

var html = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;

d3.select("body").append("a")
.attr("title", "file.svg")
.attr("href-lang", "image/svg+xml")
.attr("href", "data:image/svg+xml;base64,\n" + btoa(html))
.text("Download");

The `btoa` method is a built-in Base64 encoding. You can use another
library to do Base64 if you prefer.

Mike

[Lee]

Wow that is nice :-). I'm getting more into d3.

I see that you can apply .innerHTML, struggled with that some days ago and gave up...web programming isn't my normal field of work -.-

If you can spare the time, might you spend a look on that piece of code, how should I add the .innerHTML to my infoDiv text?

// Code Start
            // Div for the description text of the infoBox
            var infoDiv = d3.select("body").append("div")
                .attr("id", "infoDiv")
                .style("position", "absolute")
                .style("display", "table-row")
                .style("left", ((widthOfChart/2)-(widthOfInfoBox/2) + (widthOfPortrait + 50)) + "px")
                .style("top", ((heightOfChart/2)-(heightOfInfoBox/2)+ 30) + "px")
              // Content + Styling Information
              .append("div")
                .style("width", widthOfInfoBoxText + "px")
                .style("height", heightOfInfoBoxText + "px")
                .style("display", "table-cell")
                .style("text-align", "left")
                .style("color", "white")
                .text(fnc_createDescription(description, wikiUri));

        function fnc_createDescription(description, wikiUri){
           
            if(description.length > 300){
                description = description.slice(0, 300) + "...";
            }

            var url = "<a href=\"" + wikiUri + "\" target=\"_blank\">" + "wikiUri" + "</a>";


            description = description + "\n\n"  + url;

            return description;
        }

// Code End

Thanks a lot! d3 has definitly made our project possible.

Best wishes, Lee