Могу ли я добавить изображение к графику d3js?

Question

Можно ли добавить изображение в нижнем правом углу моей гистограммы? Я хочу, чтобы выглядеть, как этот граф

Это ссылка на изображение, которое я хочу добавить. https://postimg.org/image/3zrzf3vpr/ Нужно ли изменять его размер до того, как я подключу его, или могу ли я сделать это в коде?

Вот мой Plunker: http://plnkr.co/edit/sekJlYevx2dw28zLuC4d?p=preview

Я предположил, что я мог бы добавить, что подобно тому, как добавить текст, используя то, что я ниже. Хотя, если это лучший способ сделать это, не основывая это на xaxis, который был бы фантастическим.

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"); 

, но мне сложно определить, как это сделать.

Answer 1

Помещение изображения в отдельный элемент - один из подходов.

Лучший подход, на мой взгляд, состоит в том, чтобы иметь его внутри вашего 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

Answer 2

Вы можете просто поместить изображение (отдельный элемент из графика) под графиком, установить положение изображения как абсолютное и отрегулировать его атрибуты (например, сверху, слева), чтобы он шел туда, где вы хотите, чтобы он ,