如何解决将超链接添加到 amcharts Force Directed Tree 中的节点
我有 this amcharts 4 Force Directed Tree 作为我网站上不同页面的地图。我想要的是(尽管搜索了很多,但无法弄清楚如何)是当用户点击一个节点时,他们会转到与该节点对应的网页。简而言之,我想知道是否可以为节点提供可点击的名称?我非常感谢任何帮助。这是 JavaScript 代码:
am4core.useTheme(am4themes_dark);
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv",am4plugins_forceDirected.ForceDirectedTree);
var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
networkSeries.nodes.template.outerCircle.filters.push(new am4core.DropShadowFilter());
networkSeries.datafields.linkWith = "linkWith";
networkSeries.datafields.name = "name";
networkSeries.datafields.id = "name";
networkSeries.datafields.value = "value";
networkSeries.datafields.children = "children";
networkSeries.datafields.color = "color";
networkSeries.datafields.fixed = "fixed";
networkSeries.nodes.template.propertyFields.x = "x";
networkSeries.nodes.template.propertyFields.y = "y";
networkSeries.links.template.strength = 1;
networkSeries.manyBodyStrength = -20;
networkSeries.centerStrength = 0.4;
networkSeries.nodes.template.label.text = "{name}"
networkSeries.fontSize = 16;
networkSeries.minRadius = 40;
networkSeries.maxRadius = 80;
var nodeTemplate = networkSeries.nodes.template;
nodeTemplate.fillOpacity = 1;
nodeTemplate.label.hideOversized = true;
nodeTemplate.label.truncate = true;
var linkTemplate = networkSeries.links.template;
linkTemplate.strokeWidth = 5;
linkTemplate.distance = 1.5;
nodeTemplate.events.on("out",function (event) {
var dataItem = event.target.dataItem;
dataItem.childLinks.each(function (link) {
link.isHover = false;
})
})
networkSeries.events.on("inited",function() {
networkSeries.animate({
property: "veLocityDecay",to: 0.7
},3000);
});
networkSeries.data = [
{
"name":"Complex Networks","value":1000,"color":"#0086ad","fixed": true,x: am4core.percent(50),y: am4core.percent(10),"children":[
{
"name":"Theory \n and Model","value":600,x: am4core.percent(20),y: am4core.percent(20),"children":[
{
"name":"Statistical \n Physics \n Approach","color":"#36896E"
},{
"name":"Balance Theory \n Approach",{
"name":"Topological \n Data \n Analysis","value":400,{
"name": "Aged \n Networks","value": 200,"color":"#36896E"
},{
"name": "Dark \n Networks","value": 100,"color":"#36896E"
}
]
},{
"name":"Application \n and Real-data",x: am4core.percent(80),"children":[
{
"name": "Cancer \n Project","color":"#36896E","linkWith":[
"Balance Theory \n Approach"
]
},{
"name": "Social Data","color":"#8b225b",y: am4core.percent(33),"children":[
{"name":"Twitter \n Project","value":200,"color":"#36896E"},{"name":"Complex \n Social \n Systems","value":300,"color":"#36896E"}
]
}
]
}
]
},{
"name":"stochastic \n Process","fixed":true,y: am4core.percent(45),"linkWith":[
"Financial \n Markets","Application \n and Real-data"
]
},{
"name":"Network \n Neuroscience \n and Cognition","value":500,x: am4core.percent(35),"linkWith":[
"Balance Theory \n Approach","Application \n and Real-data","Topological \n Data \n Analysis",],"children":[
{
"name":"Resting-state \n fMRI Networks","url":"https://ccnsd.ir/research_projects/brain_networks/"
}
]
},{
"name":"Econo-physics",x: am4core.percent(65),"linkWith":[
"Theory \n and Model","Application \n and Real-data"
],"children":[
{
"name":"Quantum \n Economics","value":100,"color":"#36896E"
},{
"name":"Financial \n Markets","children":[
{"name": "Cryptocurrency","value": 500,{"name": "Stock \n Markets","color":"#36896E"}
]
}
]
}
];
还有 HTML:
<head>
<style>
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
body { background-color: #30303d; color: #fff; }
#chartdiv {
width: 100%;
height: 1300px;
}
</style>
</head>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/dark.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
提前致谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。