javascript - 将 HTML 链接分配给树节点文本

标签 javascript d3.js visualization data-visualization

似乎无法在 D3 树的节点上将 HTML 链接分配给文本...

完整代码位于:http://bl.ocks.org/Guerino1/raw/ed80661daf8e5fa89b85/

我使用以下代码(大约在第 162 行):

      nodeEnter.append("svg:a")
          .attr("xlink:href", function(d) { return d.hlink; })
        .append("text")
          .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
          .attr("dy", "-10")
          .attr("fill", "Blue")
          .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
          .text(function(d) { return d.name; })
          .style("fill-opacity", 1e-6);

该代码似乎适用于强制定向图,但我无法让它适用于这棵树。当我打开 DOM 树时,我发现即使存在 DOM 元素“a”和“文本”,也没有分配 HTML 链接。

最佳答案

您正在从数据中删除 href 属性。在传递给 update 函数时查看 nodes,然后在传递给 .data 函数时查看它。

这一行是罪魁祸首:var nodes = tree.nodes(root).reverse();

编辑:

更正:nodeByName 函数是罪魁祸首。

这样做:

function nodeByName(name) {

    for (var i = 0; i < nodeSet.length; i++){
        if(nodeSet[i].name === name) return nodeSet[i];
    }

    console.log("ERROR: This node name is not in the node set.")

    return nodeSet[name] = {name: name};

    //return nodeSet[name] || (nodeSet[name] = {name: name});
}

关于javascript - 将 HTML 链接分配给树节点文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24263978/

相关文章:

javascript - 遍历对象时更新状态值

javascript - 有没有一种方法可以在 vscode 中使用不使用构建工具的方法来突出显示 Vue?

graph - TLA +如何可视化状态图

javascript - 无法获取html文件中的图片

javascript - 使用 D3.js 进行数据绑定(bind)

javascript - d3.js:无法读取未定义的属性 'call'

javascript - Object.getOwnPropertyNames 为非空对象返回一个空数组

python - NetworkX 中的网络图未进行视觉优化

python - 在 python 中可视化数据

Javascript - 在一页上复制多个文本区域的文本按钮