如何在AnyChart树形图右键菜单的动作处理器中访问数据节点

核心思路 #

AnyChart在生成可视化元素时，会自动维护SVG元素与原始数据节点的关联，无需手动附加元数据。右键菜单的动作处理器中，可通过事件参数而非this对象获取对应的数据节点。

实现步骤 #

1. 初始化图表与数据
   按常规方式加载树形图数据，自定义属性（如url）会被完整保留在数据节点中：

   var dataSet = [
     {name: "Europe", url: "https://maps.google.com/europemap", children: [
       {name: "Czechia", value: 10600000, url: "https://maps.google.com/czechiamap"},
       // 其他子节点...
     ]}
   ];
   
   // 初始化树形图
   var chart = anychart.treeMap(dataSet);
   chart.title("树形图右键菜单示例");
   chart.container("container");
   chart.draw();
   

2. 配置右键菜单并绑定数据获取逻辑
   创建右键菜单时，在自定义动作的回调函数中，通过event.target.data()获取当前点击节点的原始数据，进而读取自定义属性：

   // 创建右键菜单
   var contextMenu = chart.contextMenu();
   
   // 添加自定义动作
   contextMenu.items().push({
     text: "打开对应链接",
     action: function(event) {
       // 获取当前节点的原始数据
       var nodeData = event.target.data();
       // 读取自定义url属性并执行操作
       if (nodeData.url) {
         console.log("节点链接：", nodeData.url);
         // 这里可添加你的业务逻辑，比如打开链接等操作
       }
     }
   });
   

关键说明 #

• 动作处理器中的event.target指向当前被右键点击的树形图节点元素，调用其data()方法即可获取绑定的原始数据对象，包含所有自定义属性。
• 无需手动将数据集附加到SVG，AnyChart内部已维护可视化元素与数据的映射关系，确保数据不会丢失。

内容的提问来源于stack exchange，提问作者Tomáš Zluský