plotly.js 애니메이션 API로 여러 트레이스 애니메이션하기

라이브 데이터를 스트리밍하기 위해 만든 plotly.js 대시 보드가 있습니다. 실시간 데이터 스트림 부분은 완벽하게 작동하지만 데이터가 들어올 때 동시에 모든 자취에 애니메이션을 적용하고 싶습니다. 그러나 한 번에 하나 이상의 자취를 움직일 수는 없습니다 나는 Plotly.animate에게 패스한다. 나는 그들의 웹 사이트에서 코드를 사용하여이 문제를 다시 만들었습니다.plotly.js 애니메이션 API로 여러 트레이스 애니메이션하기

<html> 
<head> 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</head> 

<body> 
    <div id="graph"></div> 
    <button onclick="javascript:randomize();">Randomize!</button> 
</body> 

<script> 
Plotly.plot('graph', [{ 
x: [1, 2, 3], 
y: [0, 0.5, 1], 
line: {simplify: false}, 
}, 
{ 
x: [3, 2, 1], 
y: [0, 0.5, 1], 
line: {simplify: false} 
}]); 

function randomize() { 
    Plotly.animate('graph', { 
    data: [{y: [Math.random(), Math.random(), Math.random()]}], 
    traces: [0,1], 
    layout: {} 
    }, { 
    transition: { 
    duration: 500, 
    ease: 'cubic-in-out' 
    } 
    }) 


    }</script> 
    </html>

추적 [0,1]을 전달하더라도 해당 배열의 첫 번째 추적에만 애니메이션이 적용됩니다. 이 문제를 해결할 수있는 설명서를 찾을 수 없습니다.

출처

2016-12-02 user7240099

답변을 찾았습니다. 문제는 Plotly.animate에 전달한 데이터와 관련이 있습니다. Plotly.animate에는 추적 정보가 하나뿐입니다.

<html> 
<head> 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</head> 
<body> 
    <div id="graph"></div> 
    <button onclick="javascript:randomize();">Randomize!</button> 
</body> 

<script> 
Plotly.plot('graph', [{ 
    x: [1, 2, 3], 
    y: [0, 0.5, 1], 
    line: {simplify: false}, 
}, 
{ 
    x: [3, 2, 1], 
    y: [0, 0.5, 1], 
    line: {simplify: false} 
}]); 

function randomize() { 
    Plotly.animate('graph', { 
    data: [{y: [Math.random(), Math.random(), Math.random()]}, {y: [Math.random(), Math.random(), Math.random()]}], 
    traces: [0,1], 
    layout: {} 
    }, { 
    transition: { 
     duration: 500, 
     ease: 'cubic-in-out' 
    } 
    }) 


}</script> 
</html>

: 여기

는 사람이 궁금 해서요 경우 작업 코드

출처

2016-12-02 09:01:27 user7240099

plotly.js 애니메이션 API로 여러 트레이스 애니메이션하기

답변

관련 문제