情节链接：https://codepen.io/Tpex/pen/YzOQNmV
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.18.2.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
d3.csv('https://raw.githubusercontent.com/Tpexas/dataset/main/csv.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row)
{ return row[key]; }); }
var x = unpack(rows , 'x');
var y = unpack(rows , 'y');
var z = unpack(rows , 'z');
Plotly.newPlot('myDiv', [{
type: 'scatter3d',
mode: 'lines',
x: x,
y: y,
z: z,
opacity: 1,
line: {
width: 6,
color: 3,
reversescale: false
}
}], {
height: 640
});
});
3d 图在移动时闪烁/抖动，在某些角度它根本不显示一些点
https://raw.githubusercontent.com/Tpexas/dataset/main/csv.csv 该数据集取自无人机飞行日志，x 代表纬度，y - 经度和 z - 高度。难道是点之间的差异太小了？谷歌地图 api 似乎生成带有纬度和经度的正常 2D 路径。