我有这个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,
"color":"#0086ad",
"fixed": true,
x: am4core.percent(20),
y: am4core.percent(20),
"children":[
{
"name":"Statistical n Physics n Approach",
"value":600,
"color":"#36896E"
},
{
"name":"Balance Theory n Approach",
"value":600,
"color":"#36896E"
},
{
"name":"Topological n Data n Analysis",
"value":400,
"color":"#36896E"
},
{
"name": "Aged n Networks",
"value": 200,
"color":"#36896E"
},
{
"name": "Dark n Networks",
"value": 100,
"color":"#36896E"
}
]
},
{
"name":"Application n and Real-data",
"color":"#0086ad",
"fixed": true,
x: am4core.percent(80),
y: am4core.percent(20),
"value":600,
"children":[
{
"name": "Cancer n Project",
"value": 100,
"color":"#36896E",
"linkWith":[
"Balance Theory n Approach"
]
},
{
"name": "Social Data",
"value": 200,
"color":"#8b225b",
"fixed": true,
x: am4core.percent(80),
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",
"value":200,
"color":"#0086ad",
"fixed":true,
x: am4core.percent(50),
y: am4core.percent(45),
"linkWith":[
"Financial n Markets",
"Application n and Real-data"
]
},
{
"name":"Network n Neuroscience n and Cognition",
"value":500,
"fixed": true,
x: am4core.percent(35),
y: am4core.percent(45),
"linkWith":[
"Balance Theory n Approach",
"Application n and Real-data",
"Topological n Data n Analysis",
],
"children":[
{
"name":"Resting-state n fMRI Networks",
"value":600,
"color":"#36896E",
"url":"https://ccnsd.ir/research_projects/brain_networks/"
}
]
},
{
"name":"Econo-physics",
"value":500,
"fixed": true,
x: am4core.percent(65),
y: am4core.percent(45),
"linkWith":[
"Theory n and Model",
"Application n and Real-data"
],
"children":[
{
"name":"Quantum n Economics",
"value":100,
"color":"#36896E"
},
{
"name":"Financial n Markets",
"value":100,
"children":[
{"name": "Cryptocurrency",
"value": 500,
"color":"#36896E"},
{"name": "Stock n Markets",
"value": 500,
"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>
提前感谢！
您可以在每个节点中放置click事件，并使用以下代码。请注意，我使用的是amchart 5版本。
series.nodes.template.events.on("click", function (e) {
switch (e.target.dataItem.dataContext.name) {
case 'Econo-physics':
window.open("https://stackoverflow.com/questions/68037180/add-hyperlink-to-nodes-in-amcharts-force-directed-tree");
}
}