javascript - d3.js 中的链接强制有向图

Question

在这个例子中，如何使每个节点的文本成为可点击的链接？

我尝试了类似于此代码的内容，但这些值不可点击：

var links = text.append("a").attr("xlink:href", "http://www.google.com/");

// A copy of the text with a thick white stroke for legibility.
links.append("svg:text")
    .attr("x", 8)
    .attr("y", ".31em")
    .attr("class", "shadow")
    .text(function(d) { return d.name; });

 links.append("svg:text")
    .attr("x", 8)
    .attr("y", ".31em")
    .text(function(d) { return d.name; });

编辑/解决方案：原来css有这个属性：指针事件：无；我不得不删除它，然后按照以利亚的建议使用。

Answer 1

不要使用链接，将其删除并直接附加到您的文本中<g>，它应该可以工作。

text.append("svg:text")
        .attr("x", 8)
        .attr("y", ".31em")
        .attr("class", "shadow")
        .text(function(d) { return d.name; })
        .on("click", function() {yourFunction(yourVar)})
        .on("mouseover", function() {yourFunction2(yourVar)})
        .on("mouseout", function() {yourFunction3(yourVar)})
;

另外，如果你想传递绑定的数据，你可以这样做：

.on("click", function(d) {yourFunction(d.yourVar)}

而如果你想传递实际的 d 对象，你可以这样做：

.on("click", yourFunction}

在这种情况下， yourFunction(d,i) 可以从绑定数据中引用 d.whatever 。