无法使用带交互的图形

function readCSV(filePath) { const content = fs.readFileSync(filePath, 'utf-8'); const lines = content.trim().split('\n'); const headers = lines[0].split(',').map(h => h.trim()); const rows = lines.slice(1).map(line => { const values = line.split(',').map(v => v.trim()); const row = {}; headers.forEach((header, index) => { row[header] = values[index]; }); return row; }); return { headers, rows }; } function extractColumnData(rows, columnName) { return rows.map((row, index) => ({ x: index, y: parseFloat(row[columnName]) })); } function visualizeSingle(csvPath, columnName) { const { rows } = readCSV(csvPath); const data = extractColumnData(rows, columnName); return { kind: { plotly: true }, data: [ { x: data.map(d => d.x), y: data.map(d => d.y), type: 'scatter', mode: 'lines+markers', name: columnName } ] }; } function visualizeCompare(csvPath, columnNames) { const { rows } = readCSV(csvPath); const colors = [ '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf' ]; const traces = columnNames.map((columnName, index) => { const data = extractColumnData(rows, columnName); return { x: data.map(d => d.x), y: data.map(d => d.y), type: 'scatter', mode: 'lines+markers', name: columnName, line: { color: colors[index % colors.length] } }; }); return { kind: { plotly: true }, data: traces }; } function visualize3D(csvPath, xColumn, yColumn, zColumn) { const { rows } = readCSV(csvPath); const xData = rows.map(row => parseFloat(row[xColumn])); const yData = rows.map(row => parseFloat(row[yColumn])); const zData = rows.map(row => parseFloat(row[zColumn])); return { kind: { plotly: true }, data: [ { x: xData, y: yData, z: zData, type: 'scatter3d', mode: 'markers', marker: { size: 4, color: zData, colorscale: 'Viridis', showscale: true, colorbar: { title: zColumn, thickness: 15, len: 0.7 } } }, hovertemplate: `<b>${xColumn}</b>: %{x:.4f}<br>` +