我的目标是在以这种方式格式化的D3.js-的节点图上到达URL：（“ xyz.net”）。图形分布如下：从视觉上来说，我的中央节点名为（id :: flare），分布在两类{id :: analytics，id :: animate}中，并以相同的机制持续分布在其他子节点上，如您在本章的最后看到的那样。我的帖子是csv格式。彼此之间的分支用（。）表示。最后，在所有其他维度之后，有最后一个url ::，我试图将其作为URL单击节点在我的绘图上表示。
我用.on.click()和.attr("xlink:href", url)链接尝试了几种解决方案，但我只将输出作为空白页面接收。
我正在处理的部分：
node.append("text")
.attr("dy", ".31em")
.attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
.style("text-anchor", function(d) { return d.x < 180 === !d.children ? "start" : "end"; })
.attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; })
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
这里是整个代码：
<!DOCTYPE html>
<!-- saved from url=(0022)http://localhost:8000/ -->
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<svg width="960" height="1060"></svg>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var tree = d3.cluster()
.size([360, window.height / 3])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
d3.csv("flare.csv").then(function(data) {
var root = tree(stratify(data));
var link = g.selectAll(".link")
.data(root.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + project(d.x, d.y)
+ "C" + project(d.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, (d.y + d.parent.y) / 2)
+ " " + project(d.parent.x, d.parent.y);
});
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; });
node.append("circle")
.attr("r", 15);
node.append("text")
.attr("dy", ".31em")
.attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
.style("text-anchor", function(d) { return d.x < 180 === !d.children ? "start" : "end"; })
.attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; })
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
})
function project(x, y) {
var angle = (x - 90) / 180 * Math.PI, radius = y;
return [radius * Math.cos(angle), radius * Math.sin(angle)];
}
</script>
</body>
</html>
我的csv看起来像这样：
id,value,url
flare,,https://www.youtube.com/?hl=FR
flare.analytics,,https://www.youtube.com/?hl=FR
flare.analytics.cluster,,https://www.youtube.com/?hl=FR
flare.analytics.cluster.AgglomerativeCluster,3938,https://www.youtube.com/?hl=FR
flare.analytics.cluster.CommunityStructure,3812,https://www.youtube.com/?hl=FR
flare.analytics.cluster.HierarchicalCluster,6714,https://www.youtube.com/?hl=FR
flare.analytics.cluster.MergeEdge,743,https://www.youtube.com/?hl=FR
flare.analytics.graph,,https://www.youtube.com/?hl=FR
flare.analytics.graph.BetweennessCentrality,3534,https://www.youtube.com/?hl=FR
flare.analytics.graph.LinkDistance,5731,https://www.youtube.com/?hl=FR
flare.analytics.graph.MaxFlowMinCut,7840,https://www.youtube.com/?hl=FR
flare.analytics.graph.ShortestPaths,5914,https://www.youtube.com/?hl=FR
flare.analytics.graph.SpanningTree,3416,https://www.youtube.com/?hl=FR
flare.analytics.optimization,,https://www.youtube.com/?hl=FR
flare.analytics.optimization.AspectRatioBanker,7074,https://www.youtube.com/?hl=FR
flare.animate,,https://www.youtube.com/?hl=FR
flare.animate.Easing,17010,https://www.youtube.com/?hl=FR
flare.animate.FunctionSequence,5842,https://www.youtube.com/?hl=FR
flare.animate.interpolate,,https://www.youtube.com/?hl=FR
flare.animate.interpolate.ArrayInterpolator,1983,https://www.youtube.com/?hl=FR
flare.animate.interpolate.ColorInterpolator,2047,https://www.youtube.com/?hl=FR
flare.animate.interpolate.DateInterpolator,1375,https://www.youtube.com/?hl=FR
flare.animate.interpolate.Interpolator,8746,https://www.youtube.com/?hl=FR
flare.animate.interpolate.MatrixInterpolator,2202,https://www.youtube.com/?hl=FR
我的目标是要为我正在设计的图形的每个节点在标签url下的csv上压缩URL，]
非常感谢
我的目标是在以这种方式格式化的D3.js-的节点图上到达URL：（“ xyz.net”）。图形的分布如下：从视觉上来说，我的中央节点名为（id :: flare），...
为了在用户单击节点时打开新选项卡，您需要做的是：