我可以将图像添加到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。请点击这里 - ＆gt; http://plnkr.co/edit/hNZXJaKGwTu9Ps4VlhfJ?p=preview

Answer 2

您可以将图像（图形中的单独元素）放在图形下方，将图像的位置设置为绝对，并调整其属性（例如，顶部，左侧），使其位于您想要的位置。