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

Question

在this example , 如何让每个节点的文本成为可点击的链接？

我尝试了与此代码类似的操作，但这些值不可点击:

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 有这个属性:pointer-events: none; 我不得不删除它，然后按照 Elijah 的建议使用。

Answer 1

不要使用链接，将其删除并直接 append 到您的文本中 <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)})
;

另外，如果你想传递绑定(bind)数据，你可以这样做:

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

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

.on("click", yourFunction}

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