Question

我正在尝试为amcharts4中的“部队指挥树”的建造制作动画。这棵树绘制得很好，但是只有在我依次添加所有节点之后，才像我想要的那样一一添加。不知道我是在做错什么，还是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的动作都是异步的，因此您的sleep方法并不是最好的方法，因为重绘可能会一直中断到最终将导致最终图表输出的地步。

更好的方法是使用图表的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>

amcharts4强制定向树无法动态更新

1 个答案: