Question

背景：我需要使用强制导向图来标记指向网址。

我正在重复使用这些例子： http://bl.ocks.org/mbostock/4062045 Hyperlinks in D3.js objects, part 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显示为节点名称。但是，没有超链接处于活动状态。

我正在浏览本网站上的所有示例，但似乎没有任何效果。请注意，我需要标签是可点击的超链接，而不是圆圈。

任何人都可以说明我做错了吗？

Answer 1

我分道扬琴，并在第一个例子中添加了一些数据。 Fiddle with working hyperlinks。唯一的问题是你应该删除样式 pointer-events: none; 因为这会阻止链接起作用。

强制导向的超链接刚刚胜利

1 个答案: