我可以添加图像到d3js图吗？

是否可以在条形图的右下角添加图像？我想是这个样子图我可以添加图像到d3js图吗？

这是链接到我要添加的图像。 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");

但我很难找出确切的方法来做到这一点。

来源

2017-02-16 Howard Smith

把图像放在一个单独的元素是一种方法。

我认为更好的方法是将其放入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

来源

2017-02-16 20:53:42 sparta93

这很棒！非常感谢！没有帮助，我永远不会想到这一点。 –

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

来源

2017-02-16 19:26:35

我可以添加图像到d3js图吗？

回答

相关问题