在 D3 中添加到节点的链接答案

【问题标题】：Adding Links to Nodes in D3在 D3 中添加到节点的链接
【发布时间】：2017-09-25 18:58:26
【问题描述】：

所以我正在处理我的 d3 视觉中的一个问题，我正在尝试创建具有指向它们的可点击链接的节点。我刚刚学习 d3，所以我在创建这些链接时遇到了麻烦。现在到目前为止，我已经在所有节点上获得了链接，但我想要实现的基本上是为每个节点提供不同的链接。目前我只是为每个节点输入一个 url，但是我将如何选择一个单独的节点并附加一个链接。我想要它，所以当用户单击对象节点时，它会转到另一个页面。

var onode = svg.append('g').selectAll(".outer_node")
        .data(data.outer)
      .enter().append("g")
        .attr("class", "outer_node")
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .on("click", click);

function click (d){
    window.open("https://www.google.com", "_self");
    }

这使得每个节点都有相同的确切链接，我不知道如何分配不同的链接。有人可以帮忙吗？

【问题讨论】：

我相信通过在函数click中传入d，我有效地在组中的当前节点上？这是真的？如果是这样，那么我将如何根据数组中的位置分配链接。抱歉，我很困惑如何做到这一点。

标签： javascript node.js d3.js

【解决方案1】：

假设您在数据集中存储了 URL，您可以在函数中访问该 URL：

function click (d){
    let url = "http://" + d.url; //or whatever your URL field is called in the data
    window.open(url, "_self");
}

您提到“在数组中的位置”，因此如果 URL 在单独的数组中，但与数据集对齐，那么您可以使用

function click (d, i){ //is this 0 based index of each item in the selection
    let url = urlData[i]
    window.open(url, "_self");
 }

【讨论】：