将超链接添加到 amcharts 强制定向树中的节点答案

【问题标题】：Add hyperlink to nodes in amcharts Force Directed Tree将超链接添加到 amcharts 强制定向树中的节点
【发布时间】：2021-06-18 14:42:52
【问题描述】：

我有thisamcharts 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>

提前致谢！

【问题讨论】：

标签： javascript amcharts amcharts4

【解决方案1】：

您可以在每个节点中放置点击事件并使用以下代码。请注意我使用的是 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");           
        }
}

【讨论】：