我可以添加圖像到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圖嗎？

回答

相關問題