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有这个attriubte：pointer-events：none; 我不得不删除它，然后按照以利亚的建议使用。

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}

在这种情况下，你的函数（d，i）可以从你的绑定数据中引用d.whatever。

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

1 个答案: