Can I add an image to the d3js chart?

Can I add an image in the lower right corner of my histogram? I want to look something like this:

graph.jpg

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

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

I assumed that I could add this similar to how I add text using what I have below. Although, if this is the best way to do this without relying on xaxis, it 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 it’s hard for me to figure out how to do this.

+4
source share
2

- .

, , , SVG. . , 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");

Plunkr. , → http://plnkr.co/edit/hNZXJaKGwTu9Ps4VlhfJ?p=preview

+4

( ) , (, , ), , .

0

Source: https://habr.com/ru/post/1669980/


All Articles