CODEWITHSUNDEEP
javascriptd3.jssvg
Howard Smith
Howard Smith

Reputation: 328

Can I add an image to a d3js graph?

Is it possible to add an image in the bottom right corner of my bar chart? I want to look something like this graph

graph.jpg

This is the link to the image I want to add.https://postimg.org/image/3zrzf3vpr/ Do I need to resize it before I connect it or can I do this within the code?

Here is my Plunker: http://plnkr.co/edit/sekJlYevx2dw28zLuC4d?p=preview

I assumed I could add it similar to how I add text using what I have below. Though if these is a better way to do it without basing it off the xaxis that would be fantastic.

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .append("text")
  .attr("class", "label")
  .attr("x", 170)
  .attr("y", 40)
  .style("text-anchor", "end")
  .text("Source: D.C. Open Data, D.C. Policy Center");

but I'm having a hard time figuring out the exact way to do it.

Upvotes: 4

Views: 804

Answers (2)

sparta93
sparta93

Reputation: 3854

Putting the image in a separate element is one approach.

The better approach in my opinion is to have it inside your SVG. You can append it like the following and position it accordingly. I used the following to add it to your plunkr:

  var imgs = svg
        .append("svg:image")
        .attr("xlink:href", "https://s27.postimg.org/h3xjrsnrn/dcpolicycenter.png")
            .attr("x", width - 100)
            .attr("y", height - 14)
            .attr("width", "100")
            .attr("height", "100");

I've updated your Plunkr. Please check here -> http://plnkr.co/edit/hNZXJaKGwTu9Ps4VlhfJ?p=preview

Upvotes: 4

Ethan Chen
Ethan Chen

Reputation: 680

You can just put the image (a separate element from the graph) below the graph, set the position of the image as absolute, and adjust its attributes (e.g. top, left) so that it goes where you want it to.

Upvotes: 0

Related Questions