减轻 Force Directed Tree Amcharts 5 各个级别的填充颜色

Question

我正在遵循一个教程，根据节点的级别来淡化 amCharts 5 中力导向树图表中节点的颜色。但是，我找不到tutorial中提到的“level”属性。此外，也没有发现lighten属性。 amCharts 5 中是否有任何替代属性或方法可以实现此目的，或者我在文档中遗漏了某些内容？

networkSeries.nodes.template.adapter.add("fill", function(fill, target) {
  return fill.lighten(target.dataItem.level * 0.25);
});

我当前的代码：

series.circles.template.adapters.add("fill", function(fill, target) {
  return fill.lighten(target.dataItem.level * 0.25);
});

test.html:196 未捕获类型错误：无法读取未定义的属性（读取“lighten”） 在数组。 （测试.html:196:15） 在 p.fold (index.js:1:256476) 在 n.get (index.js:1:267893) 在 n._afterChanged (index.js:1:121765) 在index.js:1:85748 在Array.forEach() 在 Ae._runDirties (index.js:1:85733) 在 Ae._renderFrame (index.js:1:86017) 在 Ae._runTicker (index.js:1:86364) 在 _ticker._ticker (index.js:1:86789)

Answer 1

在

amcharts5

中，需要初始化

ColorSet

对象。

import { ColorSet } from "@amcharts/amcharts5";

let colorSet = new ColorSet();
series.circles.template.adapters.add("fill", function(fill, target) {
    let level = target.dataItem.get("level") || 0;
    return colorSet.getIndex(level).lighten(level * 0.25);
});

另外，level属性默认情况下不会自动可用，所以你需要计算它

function assignLevels(data, level = 0) {
    data.forEach(node => {
        node.level = level;
        if (node.children) {
            assignLevels(node.children, level + 1);
        }
    });
}

assignLevels(yourChartData);