修改 d3.js 代码以生成静态 3d 图

Question

我正在尝试使用 D3 创建交互式 3D 绘图，但数据来自 numpy。我在这里找到了一个不错的 D3 示例： http://bl.ocks.org/hlvoorhees/5986172

任何人都可以找出我需要将此代码中的哪些行更改为

停止动画
提供我选择的 xy 数据值

??????

Answer 1

在 Javascript 文件的末尾，替换此行：

setInterval( updateData, defaultDuration );

有了这个：

function waitForX3d(resolve) {
  if ( x3d.node() && x3d.node().runtime ) {
    resolve();
  } else {
    new Promise(r => setTimeout(r, 100))
    .then(() => waitForX3d(resolve));
  }
}
// setInterval( updateData, defaultDuration );
new Promise(r => waitForX3d(r))
.then(() => updateData());

更改 updateData 函数以将数据加载到行变量中。

Answer 2

最终我意识到 rows 变量是我需要更改的。我在 initializeDataGrid()

中修改了它

然后我用 plotData()

代替 setInterval(updateData, defaultDuration)

现在我可以在交互式 3D 网格中绘制任何数据集了！

@@ -235,11 +234,13 @@ function scatterPlot3d( parent )
   function initializeDataGrid() {
     var rows = [];
     // Follow the convention where y(x,z) is elevation.
+        //EDIT THIS FOR STATIC DATA!!!
     for (var x=-5; x<=5; x+=1) {
       for (var z=-5; z<=5; z+=1) {
-        rows.push({x: x, y: 0, z: z});
+        rows.push({x: x, y: (x+z)/2, z: z});
      }
     }
+    rows.push({x: 2.5, y: 0, z: 2.5});
     return rows;
   }
@@ -259,8 +261,5 @@ function scatterPlot3d( parent )

   initializeDataGrid();
   initializePlot();
-  setInterval( updateData, defaultDuration );
+  plotData();

修改 d3.js 代码以生成静态 3d 图

Modify d3.js code to generate static 3d plot

javascript

data-visualization

d3.js