使用Plotly JS的UpdateMenu Animate方法下拉来在轨迹之间产生动画。

Question

我无法让它回到原始轨迹的动画。

在下面的例子中，我可以将图表改为轨迹2。但它没有回到轨迹1。

//myPlot = document.getElementById('chart')
var trace1 = {
  x: [1],
  y: [1],
  type: 'scatter',
  mode: 'markers',
  name: 'Trace 1',
}

var trace2 = {
  x: [.5],
  y: [.5],
  type: 'scatter',
  mode: 'markers',
  name: 'Trace 2',
}

var frames = [{
    name: 'trace 1',
    data: [trace1]
  },
  {
    name: 'trace 2',
    data: [trace2]
  }
]
console.log(frames)
var layout = {
  yaxis: {
    range: [0, 2]
  },
  xaxis: {
    range: [0, 2]
  },
  updatemenus: [{
    buttons: [{
        method: 'animate',
        args: [
          ['trace 1']
        ],
        label: 'One'
      },
      {
        method: 'animate',
        args: [
          ['trace 2']
        ],
        label: 'Two'
      }
    ]
  }]
}

Plotly.newPlot("chart", [trace1], layout).then(function() {
  Plotly.addFrames('chart', frames);
});

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Media Bias</title>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- <link rel="stylesheet" type="text/css" href="static/css/Index_Style.css">
     -->
</head>

<div Id='chart'>

</div>

以及他们工作样本的修改后的代码示例。

在工作示例中，你可以使用下拉菜单在三个轨迹之间切换。

Answer 1

由于某些原因，你不能把跟踪放在数据列表中（在帧变量中）。你需要手动设置数据的x和y值。

//myPlot = document.getElementById('chart')
var trace1 = {
  x: [1],
  y: [1],
  type: 'scatter',
  mode: 'markers',
  name: 'Trace 1',
}

var trace2 = {
  x: [.5],
  y: [.5],
  type: 'scatter',
  mode: 'markers',
  name: 'Trace 2',
}

var frames = [{
    name: 'trace 1',
    data: [{
      x: trace1.x,
      y: trace1.y
    }]
  },
  {
    name: 'trace 2',
    data: [{
      x: trace2.x,
      y: trace2.y
    }]
  }
]
//console.log(frames)
var layout = {
  yaxis: {
    range: [0, 2]
  },
  xaxis: {
    range: [0, 2]
  },
  updatemenus: [{
    buttons: [{
        method: 'animate',
        args: [
          ['trace 1']
        ],
        label: 'One'
      },
      {
        method: 'animate',
        args: [
          ['trace 2']
        ],
        label: 'Two'
      }
    ]
  }]
}

Plotly.newPlot("chart", [trace1], layout).then(function() {
  Plotly.addFrames('chart', frames);
});

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Media Bias</title>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- <link rel="stylesheet" type="text/css" href="static/css/Index_Style.css">
     -->
</head>

<div Id='chart'>

</div>

使用Plotly JS的UpdateMenu Animate方法下拉来在轨迹之间产生动画。

问题描述投票：1回答：1

1个回答

最新问题

使用Plotly JS的UpdateMenu Animate方法下拉来在轨迹之间产生动画。

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1