Anychart网络图：如何获取选中节点并触发事件展示其数据？

Anychart没有提供直接返回所有选中节点的内置函数，但可以通过遍历节点集合结合状态判断来实现需求：

核心实现思路 #

利用chart.nodes()获取所有节点，通过node.selected()方法（不带参数时返回当前节点的选中状态）筛选出选中的节点。

代码示例 #

1. 编写获取选中节点的工具函数 #

function getSelectedNodes(chart) {
  const selectedNodes = [];
  // 获取所有节点集合
  const nodes = chart.nodes();
  // 遍历每个节点
  nodes.each(function(node) {
    // 判断当前节点是否处于选中状态
    if (node.selected()) {
      // 收集节点数据，可根据需求添加字段
      selectedNodes.push({
        id: node.id(),
        name: node.name(),
        rawData: node.get('data') // 获取节点绑定的原始数据
      });
    }
  });
  return selectedNodes;
}

2. 触发事件展示选中节点数据 #

方式一：按钮点击触发

// 假设页面中有id为showSelected的按钮
document.getElementById('showSelected').addEventListener('click', function() {
  const selectedNodes = getSelectedNodes(yourChartInstance);
  // 这里可将数据渲染到页面，比如弹窗、表格
  console.log('选中节点数据：', selectedNodes);
});

方式二：监听选中/取消选中事件实时更新

// 监听节点选中事件
yourChartInstance.listen('nodeSelect', function() {
  const selectedNodes = getSelectedNodes(yourChartInstance);
  console.log('当前选中节点：', selectedNodes);
  // 实时更新展示内容
});

// 监听节点取消选中事件
yourChartInstance.listen('nodeUnselect', function() {
  const selectedNodes = getSelectedNodes(yourChartInstance);
  console.log('当前选中节点：', selectedNodes);
});

补充说明 #

node.selected()方法支持两种用法：

• 带参数调用（如node.selected(true)）：设置节点的选中状态
• 不带参数调用：返回当前节点的选中状态（布尔值），这一点可能文档描述不够直观，但实际可用于判断节点是否选中。

内容的提问来源于stack exchange，提问作者nix