如何在nvd3條形圖內添加圖像？

我在我的項目中實現了一個d3條形圖。不過，我現在需要在每個欄上方添加一個小圖像，並且在點擊圖像時，我需要重定向到新頁面以顯示更多信息。我怎樣才能做到這一點？
在此先感謝如何在nvd3條形圖內添加圖像？

2013-09-25 Faysal Ahmed

你試過了什麼？它沒有工作，你有任何錯誤？你能舉一個當前實施條形圖的例子嗎？（http://jsfiddle.net/） –

我已創建一個公共存儲庫https://bitbucket.org/FaysalAhmed/nvd3_issue/src代碼文件是index.html，我需要添加一個小圖像（？標記圖像）在每個欄上方，以便用戶可以點擊該圖像並轉到下一頁。 –

爲了做到這一點，您需要選擇包含條的元素並將圖像追加到它們。圖像元素將位於指定鏈接目標的錨元素內。代碼看起來像這樣。

svg.selectAll(".nv-bar") 
    .append("a") 
    .attr("xlink:href", newPage) 
    .append("image") 
    .attr("xlink:href", imageURL);

請注意，您將需要調整圖像的位置出現了吧，像.attr("transform", "translate(0,-20)")即上面的東西 - 確切值將取決於圖像的大小。

來源

2013-09-25 10:36:23

嗨，我試過svg.selectAll（「。nv-bar」）它迴應了[TypeError：無法讀取屬性'1'undefined] 但是編寫d3.selectAll（「.nv-bar」）返回數組。我試過你給出的代碼，但仍然無法工作。我已經在https://bitbucket.org/FaysalAhmed/nvd3_issue/src/50dab0b6af3cdd474ecac94c7e0ff6d4265d6c42/index.html?at=master上傳了我的代碼希望它可以幫助理解我面臨的問題。 –

你能否詳細解釋一下？答案中的代碼實際上只是一個指南 - 你不能複製和粘貼它。它怎麼不起作用？ –

我在bitbucket中給出的代碼正在工作，這是一個例子，是真的。其實我正在學習d3js並在一個項目中實現它，並且需要在條形圖中的每個條上方添加一個圖像。我需要一個例子或一個想法，通過它我可以在條形圖的條形圖上添加圖像。  –

如何在nvd3條形圖內添加圖像？

回答

相關問題