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

Showing 1-6 of 6 messages
How to add image (eg. jpg) from an URL to a d3 generated graph Lee 5/24/11 4:26 AM
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
Re: How to add image (eg. jpg) from an URL to a d3 generated graph Mike Bostock 5/24/11 8:05 AM
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

Aw: Re: How to add image (eg. jpg) from an URL to a d3 generated graph Lee 5/24/11 8:19 AM
Thank you very much....it works just fine :-)


Re: How to add image (eg. jpg) from an URL to a d3 generated graph Tim 5/24/11 11:54 AM
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:


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.


Re: How to add image (eg. jpg) from an URL to a d3 generated graph Mike Bostock 5/24/11 12:02 PM
> 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

Aw: Re: How to add image (eg. jpg) from an URL to a d3 generated graph Lee 5/24/11 2:39 PM
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