AmCharts5异步更新节点availability属性后如何触发颜色变更？

问题描述 #

我正在使用AmCharts5 JS构建一个ForceDirected树图，将域名作为节点展示。域名展示后，通过异步函数检测其可用性，并尝试根据可用性修改节点颜色，但在此环节遇到问题。

已创建适配器根据节点的availability属性修改节点填充色：

series.circles.template.adapters.add("fill", function(fill, target) {
  if (target.dataItem.dataContext.availability == 'unavailable') {
    return am5.color(0xb30000);
  }
  else {
    return am5.color(0x50b300);
  }
});

该适配器对初始携带availability属性的节点生效。但异步查询返回结果后，通过series.getDataItemById('nameOfNode').dataContext.availability = 'XYZ'更新availability属性时，虽然dataContext已变更，但适配器未被重新触发，节点颜色保持不变。询问是否有方法重新触发适配器，或手动强制修改指定dataItem的颜色？

解决方法 #

方法一：使用dataItem.set()更新数据（推荐） #

AmCharts5的dataContext并非响应式对象，直接修改不会触发视图更新。正确的做法是使用dataItem的set()方法更新属性，该方法会自动触发适配器和视图的重新渲染：

const dataItem = series.getDataItemById('nameOfNode');
dataItem.set("availability", "unavailable"); // 或传入"available"

同时调整适配器逻辑，直接从dataItem获取属性而非dataContext：

series.circles.template.adapters.add("fill", function(fill, target) {
  if (target.dataItem.get("availability") === 'unavailable') {
    return am5.color(0xb30000);
  } else {
    return am5.color(0x50b300);
  }
});

方法二：手动触发适配器刷新 #

如果需要保留直接修改dataContext的方式，可以手动调用节点元素的markDirty()方法，强制触发适配器重新计算填充色：

const dataItem = series.getDataItemById('nameOfNode');
dataItem.dataContext.availability = 'unavailable';
// 获取节点对应的circle元素并标记为脏数据，触发适配器重新执行
dataItem.get("circle").markDirty();

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