添加链接到D3中的节点

问题描述：

因此，我正在处理我的d3 visual中的一个问题，在该问题中，我尝试创建具有可点击链接的节点。我只是在学习D3，所以我在创建这些链接时遇到了麻烦。现在到目前为止，我已经获得了所有节点上的链接，但是我希望实现的目的是为每个节点提供不同的链接。目前，我只是为每个节点添加一个url，但是我将如何选择一个单独的节点并附加一个链接。我想这样做，当用户点击对象节点时，它会转到另一个页面。添加链接到D3中的节点

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"); 
    }

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

我相信，通过在函数中传递d点击，我有效地在组中的当前节点？这是真的？如果是这样，那么我将如何根据数组中的位置来分配链接。对不起，只是很困惑如何做到这一点。 – fatalwanderer

答

假设你已经存储在数据集中的网址时，你可以在你的函数访问网址：

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"); 
}

添加链接到D3中的节点

相关推荐