javascript - 如何根据节点点击访问 URL?
问题描述
我的目标是使用 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 。
非常感谢
解决方案
要在用户单击节点时打开新选项卡,您只需要:
.on("click", function(d) {
window.open(d.url, "_blank");
});
在您的情况下,在输入选择中执行此操作nodes
:
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) + ")"; })
.on("click", function(d) {
window.open(d.url, "_blank");
});
推荐阅读
- python - 删除熊猫数据框中的所有元素的最佳方法是什么,其中一列中的值在另一列中存在多次?
- python - 更改 matplotlib axes3d PolyCollection 的 Facecolor
- sql - 在Oracle中字母数字的开头和结尾附加单引号
- pusher - Pusher 私人聊天适用于本地主机,不适用于实时服务器
- java - 在 Jboss 模块和项目依赖项之间选择一个库版本
- python-3.x - 使用 pytest,我如何模拟 pathlib 的 Path.isdir() 函数和 os.listdir
- intellij-idea - 如何在 Intellij 编辑器中实现非侵入式 UI 元素
- arrays - MongoDB 不允许跨文档复制数组
- node.js - 子进程和异步编程的概念在 Node.js 中是否相同?
- java - 登录后重定向到自定义网址