用滑块定制三维可视化

Question

我最近一直在探索。我使用Plotly的fig2plotly()制作了一个3D值函数的轮廓片。然而，我一直在研究如何进一步定制这个情节，但我不知道我将如何做到这一点。

我现在的情节在这里：

https://plot.ly/~txizzle/81

基本上是不同的等高线叠加在一起。

我的目标：

我想添加一个滑块，它一次只显示一个等高线切片(可能通过改变可见度)。理想情况下，我可以修复从顶部的鹰眼视图，因此移动滑块将使它看起来像是二维的情节。

我对如何处理这个问题的思考：

1) https://plot.ly/javascript-graphing-library/range-slider/似乎是一个自定义滑块的HTML/JS实现，它改变了线图的x轴范围。据我所读，这种方法似乎仅限于Node.js。理想情况下，我希望只在HTML/JS/JQuery/D3.js中实现一些东西。

2)或者，我可以使用2D等高线图而不是三维轮廓片：

https://plot.ly/49/~txizzle/

然而，现在，我将需要有许多这些等高线图。我不知道如何用滑块在不同的等高线图之间切换。

我的问题：

( 1)如何定制实际情节？如果不依赖Node.js，这是可能的吗？我不想仅仅使用Plotly的自动嵌入器嵌入这些图形，因为它将所有的东西都抽象掉了。

( 2)我应该做一个等高线图还是许多不同的等高线图？

3)如何添加一个滑块来切换不同轮廓切片的可见性，或者如何添加一个滑块来完全切换不同的图形？

谢谢您抽时间见我!期待着更多的探索。

Answer 1

由于您使用MATLAB库来生成巧妙的图形，您可以添加滑块效果，方法是在离线HTML文档中将该图形作为iframe嵌入，然后使用plotly的postmessage。

下面是一个例子：https://plot.ly/matlab/range-slider/

postMessage API：https://github.com/plotly/postMessage-API