amcharts4力定向树不动态更新

Question

我试图动画一个力定向树在amcharts4的建设。树绘制得很好，但是只有在我按顺序添加了所有节点之后，才画得很好，而不是像我想要的那样1乘1。不确定我是否做错了什么，或者amcharts4 FDT是否不允许这种类型的图表更新。

这里是我的代码：

  // https://www.amcharts.com/docs/v4/chart-types/force-directed/
am4core.useTheme(am4themes_animated);

// Create chart
var amchart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
// Create series
var series = amchart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
// Set data

// Set up data fields
series.dataFields.value = "value";
// series.dataFields.name = "name";
series.dataFields.children = "children";
series.dataFields.id = "name";
series.dataFields.linkWith = "link";
series.fontSize = 9;
series.minRadius = 40;
series.maxRadius = 70;
series.nodes.template.circle.fillOpacity = 0.9;
series.nodes.template.circle.filters.push(new am4core.DropShadowFilter());

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
            break;
        }
    }
}

var array = [ {'name': 'A', 'text': 'A', 'username': 'A', 'value': 0.5333333333333333, 'link': ['B', 'C']}, {'name': 'B', 'text': 'B', 'username': 'B', 'value': 0.0, 'link': []}, {'name': 'C', 'text': 'C', 'username': 'C', 'value': 0.0}];
var arrayLength = array.length;
for (var i = 0; i < arrayLength; i++) {
  console.log(array[i], true);
  amchart.addData(array[i]);
  amchart.invalidateData();
  sleep(2000);
}

Answer 1

AmCharts的操作都是异步的，所以您的睡眠方法并不是最好的方法，因为重绘很可能一直被中断，以至于只会导致最终的图表输出。

更好的方法是使用图表的datavalidated事件，并使用它来确定何时添加下一个节点。如果您希望延迟，请将其包装在setTimeout中：

amchart.events.on('datavalidated', gradualFill);  
function gradualFill() {
  if (array.length) {
    setTimeout(function() {
      amchart.addData(array.pop()); //or array.shift(), or however you want to order the nodes' visibility
    }, 1000)
  }
  else {
    amchart.events.off('datavalidated', gradualFill); //remove this event handler when you're done
  }
}

演示如下：

​

// https://www.amcharts.com/docs/v4/chart-types/force-directed/
am4core.useTheme(am4themes_animated);

// Create chart
var amchart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
// Create series
var series = amchart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
// Set data

// Set up data fields
series.dataFields.value = "value";
// series.dataFields.name = "name";
series.dataFields.children = "children";
series.dataFields.id = "name";
series.dataFields.linkWith = "link";
series.fontSize = 9;
series.minRadius = 40;
series.maxRadius = 70;
series.nodes.template.circle.fillOpacity = 0.9;
series.nodes.template.circle.filters.push(new am4core.DropShadowFilter());

var array = [ {'name': 'A', 'text': 'A', 'username': 'A', 'value': 0.5333333333333333, 'link': ['B', 'C']}, {'name': 'B', 'text': 'B', 'username': 'B', 'value': 0.0, 'link': []}, {'name': 'C', 'text': 'C', 'username': 'C', 'value': 0.0}];

amchart.events.on('datavalidated', gradualFill);  
function gradualFill() {
  if (array.length) {
    setTimeout(function() {
      amchart.addData(array.pop()); //or shift, or however you want to order the nodes' visibility
    }, 1000)
  }
  else {
    amchart.events.off('datavalidated', gradualFill); //remove this event handler when you're done
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 400px;
}

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<div id="chartdiv" style="height:200px;"></div>  

​