Plotly.js v2.25.2中Plotly.d3缺失问题咨询及替代方案请求

问题概述 #

升级到Plotly.js v2.25.2后，原有的Plotly.d3 API被移除，调用时返回undefined，导致依赖该API的DOM操作代码完全失效，且官方迁移指南未提及此变更。

复现步骤 #

• 安装指定版本：npm install plotly.js@^2.25.2
• 执行以下代码：

import Plotly from 'plotly.js-dist';
console.log(Plotly.d3); // 输出 undefined

解决方案 #

1. 直接引入D3库（适配原有代码） #

如果需要快速兼容旧代码逻辑，可以单独安装并引入D3，替代原有的Plotly.d3：

1. 安装D3：

npm install d3

2. 修改代码：

import Plotly from 'plotly.js-dist';
import * as d3 from 'd3'; // 直接导入独立的D3库

ngAfterViewInit() { 
  const container = document.getElementById(`chart${this.id}`); 
  const gd3 = d3.select(container).append('div').style({ width: '95%', height: '95vh' }); 
  this._container = gd3.node(); 
  Plotly.newPlot(this._container, this.data, this.layout, this.options); 
}

2. 使用原生DOM API替代（推荐长期方案） #

若仅需简单的元素创建和样式设置，推荐用原生DOM API替代D3，减少额外依赖：

import Plotly from 'plotly.js-dist';

ngAfterViewInit() { 
  const container = document.getElementById(`chart${this.id}`); 
  // 原生DOM创建并配置元素
  const chartDiv = document.createElement('div');
  chartDiv.style.width = '95%';
  chartDiv.style.height = '95vh';
  container.appendChild(chartDiv);
  
  this._container = chartDiv; 
  Plotly.newPlot(this._container, this.data, this.layout, this.options); 
}

补充说明 #

Plotly移除内置D3的核心原因是为了优化包体积，避免强制引入不必要的依赖。如果你的业务场景中存在复杂的数据可视化或DOM操作需求，建议保留独立的D3依赖；若只是基础的元素操作，原生DOM API完全可以满足需求，同时降低项目的依赖复杂度。

内容的提问来源于stack exchange，提问作者abhishek patil