我正在使用plotly打印旭日形图。
我想在更新数据时使图形动画化。
var data = [{
type: "sunburst",
labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
values: [10, 14, 12, 10, 2, 6, 6, 4, 4],
outsidetextfont: {size: 20, color: "#377eb8"},
leaf: {opacity: 0.4},
marker: {line: {width: 2}},
}];
var layout = {
margin: {l: 0, r: 0, b: 0, t: 0},
width: 500,
height: 500
};
Plotly.newPlot('myDiv', data, layout);<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>我知道要更新图形，最好使用`Plotly.react（'myDiv'，data，layout）;
但是当我更新图表时，更改显示时没有过渡动画。
有没有一种方法可以对数据变化进行动画处理？
如果否，是否还有其他选择？ （我正在使用Angular）
[官方文档中有一个Plotly.animate，专门用于提示如何为绘图设置动画。
我已经更新了您的代码段，在下面包含了定期动画的演示。
animation section
var data = [{
type: "sunburst",
labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
values: [10, 14, 12, 10, 2, 6, 6, 4, 4],
outsidetextfont: {size: 20, color: "#377eb8"},
leaf: {opacity: 0.4},
marker: {line: {width: 2}},
}];
var layout = {
margin: {l: 0, r: 0, b: 0, t: 0},
width: 500,
height: 500
};
Plotly.newPlot('myDiv', data, layout);
// Periodically animate chart by reversing current value collection
setInterval(function () {
var values = data[0].values.slice().reverse();
Plotly.animate('myDiv', {
data: [{ values: values }],
}, {
transition: {
duration: 500,
easing: 'cubic-in-out',
},
frame: {
duration: 500,
}
});
}, 2000);