指向的超链接刚刚赢得'不起作用

hyperlinks in force-directed just won't work

本文关键字：不起作用 超链接      更新时间：2023-09-26

上下文：我需要我的力导向图有指向url的标签。

我正在重复使用这些示例：http://bl.ocks.org/mbostock/4062045D3.js对象中的超链接，第2部分

我的文件：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
  stroke: #666;
  stroke-width: 1.0px;
}

.link {
  stroke: #ccc;
}
.node text {
  pointer-events: none;
  font: 12px sans-serif;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
//Constants for the SVG
var width = 900,
    height = 600;
//Set up the colour scale
var color = d3.scale.category20();
//Set up the force layout
var force = d3.layout.force()
    .charge(-100)
    .linkDistance(100)
    .size([width, height]);
  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// read the JSON file
d3.json("collection_url.json", function(error, graph) {
force.nodes(graph.nodes)
    .links(graph.links)
    .start();
var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function (d) {
    return Math.sqrt(d.value);
});
var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);
node.append("circle")
    .attr("r", 10)
    .style("fill", function (d) {
    return color(d.group);
})

// if it's a child, url it
  node.each(function(d){
  var thisNode = d3.select(this);
  if (!d.children) {
    thisNode.append("a")
        .attr("xlink:href", function(d) { return d.url; })
        .append("text")
            .attr("dx", 8)
            .attr("dy", 3)
            .attr("text-anchor", "start")
            .text(function(d) { return d.url; })
            ;
   } else {
    thisNode.append("text")
        .attr("dx", -8)
        .attr("dy", 3)
        .attr("text-anchor", "end")
        .text(function(d) { return d.name; });      
     }
    });
// force be with you
force.on("tick", function () {
    link.attr("x1", function (d) {
        return d.source.x;
    })
        .attr("y1", function (d) {
        return d.source.y;
    })
        .attr("x2", function (d) {
        return d.target.x;
    })
        .attr("y2", function (d) {
        return d.target.y;
    });

    d3.selectAll("circle").attr("cx", function (d) {
        return d.x;
    })
        .attr("cy", function (d) {
        return d.y;
    });
    d3.selectAll("text").attr("x", function (d) {
        return d.x;
    })
        .attr("y", function (d) {
        return d.y;
    });
 });
});
</script>
</body>
</html>

问题：

JSON解析正确：我的url显示为它们应该显示的节点名。但是，没有活动的超链接。

我正在浏览这个网站上的所有例子，但似乎什么都不起作用。请注意，我需要标签是可点击的超链接，而不是圆圈。

有人能说明我做错了什么吗？

我分叉了你的fiddle，并添加了第一个例子中的一些数据。摆弄工作中的超链接。唯一的问题是你应该删除样式pointer-events: none;因为这会使链接停止工作。

相关文章：