我可以为d3js图表添加图片吗？

Question

在我的条形图的右下角添加图片是否可行？我希望它看起来像这张图片：

这是我想要添加的图片链接：https://postimg.org/image/3zrzf3vpr/我需要在连接之前调整它的大小吗，还是可以在代码中进行操作？

这是我的 Plunker 链接：http://plnkr.co/edit/sekJlYevx2dw28zLuC4d?p=preview

我假设我可以使用下面的代码类似于添加文本的方式添加图片。不过，如果有更好的方法可以不基于 x 轴添加图片，那就太棒了。

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

但是我很难弄清楚确切的方法。

- Howard Smith

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

- sparta93

---

这太棒了! 非常感谢! 没有帮助，我永远不会想到解决这个问题。 - Howard Smith

Answer 2

你可以将图片（与图表分开的元素）放在图表下方，将图片的位置设置为绝对定位，并调整其属性（例如顶部、左侧），使其到达您想要的位置。

- Ethan Chen