在使用d3.js時仍然相當缺乏經驗，我碰到了一個障礙。 希望有人能幫助我。d3.js v4：如何在鼠標點擊節點后顯示圖像

我試圖在鼠標單擊圖形中的節點時顯示圖片。 理想情況下，我想單擊幾個節點并顯示圖像。雙擊節點應該刪除圖像。點擊背景將刪除所有顯示的圖像。但一次只能一步。

我到目前為止所做的是： 成功使用工具提示。當鼠標點擊它時，我也能夠改變圓形節點的大小。

我用作玩具項目邁克·博斯托克的力導向圖示例：https://bl.ocks.org/mbostock/4062045。基于Web的，我能夠將圖片添加到所有節點上的例子 我使用d3.js v4的

我試圖調整這個例子來我的需求。首先我說：

var defs = svg.append('defs');

進一步：

var node = svg.append("g")

.attr("class", "nodes")

.selectAll("circle")

.data(graph.nodes)

.enter()

.append("circle")

.attr("r", 5)

.attr("fill", function(d) { return color(d.group); })

.call(node_drag)

.on("click", function(d){

defs.append("pattern")

.attr("x", 0)

.attr("y", 0)

.attr("width", 12)

.attr("height", 12)

.append("image")

.attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')

.attr("width", 12)

.attr("height", 12)

.attr("x", 0)

.attr("y", 0);

})

在我的瀏覽器的HTML表示圖像添加：

但圖像沒有在顯示瀏覽器。

在這一點上，我轉向你，希望得到一些提示，我點擊鼠標光標時如何完成將圖像顯示為節點。

任何輸入被高度贊賞， 馬庫斯

2017-10-14

Markus

總結

以上是生活随笔為你收集整理的d3.js html显示图片,d3.js v4：如何在鼠标点击节点后显示图像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。