Question

所以我正在处理d3 visual中的一个问题，我试图创建具有可点击链接的节点。我正在学习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");
    }

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

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

在D3中添加指向节点的链接

1 个答案: