Plotly.js React嵌入Web Components后2D图双main-svg拆分问题求助

问题现象 #

• 2D图表挂载后被拆分为两个独立的<main-svg>元素，一个承载数据点，一个承载坐标轴等布局元素
• 点击、选中这类交互事件仅在承载布局的<main-svg>上触发，数据区域无响应
• 3D图表无此异常，仅与2D图表的差异为：多获取z轴数据、图表类型设为'scatter3d'

相关代码 #

2D Plotly React组件代码 #

export class Sct2dClassComp extends React.Component{
  constructor(props){
    super(props);
    this.state = {  
        data : props.data,
        layout : {
          xaxis:{ title:'x-axis' },
          yaxis:{ title:'y-axis' },
          hovermode:'closest',
          margin:{l:0, r:0, t:0, b:0},
        },
        config : {
          displaylogo: false,
          modeBarButtonsToRemove: [
            'autoScale2d',
            'hoverClosestCartesian',
            'hoverCompareCartesian',
            'toggleSpikelines',
            'pan2d',
            'zoomIn2d',
            'zoomOut2d',
            'zoom2d',
            'lasso2d'
          ],
        }
    };
  }

  handleOnSelectedEvent = (event) => {
    window.alert("onSelected events fired onSelected event")
  }

  handleOnClickEvent = (events) => {
    window.alert("onClick events fired onClick event")
  }

  componentDidMount(){
    axios.get('http://localhost:3003/sct')
         .then(resp => {
             const res_data = resp.data;
             if (res_data && res_data.length > 0) {
               const sct_data=[{
                 x: res_data.map((item) => item.x),
                 y: res_data.map((item) => item.y),
                 mode: 'markers',
                 type: 'scatter',
                 marker:{
                   size: 7,
                   color: res_data.map((item) => item.color),
                   opacity: 0.8
                 },
                 hovertemplate:res_data.map((item) => item.name)
               }] 
             this.setState({ data : sct_data });
             }   
         })
  }

  render() {
      return (
          <div>
            <Plot
              data={this.state.data}
              layout={this.state.layout}
              config={this.state.config}
              onClick={this.handleOnClickEvent}
              onSelected={this.handleOnSelectedEvent}  
            />
          </div>
      );
    }
}

Web Components自定义元素代码 #

class Sct2dElement extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.mountPoint = document.createElement('span');
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(this.mountPoint);
    ReactDOM.render(<Sct2dClassComp />, this.mountPoint);
    retargetEvents(this.shadowRoot);
  }
  
  disconnectedCallback(){
      ReactDOM.unmountComponentAtNode(this.mountPoint);
  }
}

customElements.define('sct2d-element', Sct2dElement);

原因分析 #

Plotly.js的2D图表渲染逻辑依赖常规DOM的样式和事件委托机制，在Shadow DOM环境下，由于样式隔离和事件重定向特性，导致Plotly错误地将SVG元素拆分为两个独立的<main-svg>，同时交互事件无法正确传递到数据区域。而3D图表基于WebGL渲染，不依赖SVG拆分逻辑，因此不受影响。

解决方法 #

1. 优化Shadow DOM配置与容器布局 #

将挂载节点改为<div>并添加基础样式，同时调整Shadow DOM配置以优化事件传递：

class Sct2dElement extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    // 改用div作为挂载容器，确保块级布局
    this.mountPoint = document.createElement('div');
    this.mountPoint.style.width = '100%';
    this.mountPoint.style.height = '100%';
    
    // 开启delegatesFocus优化事件处理
    const shadowRoot = this.attachShadow({ 
      mode: 'open',
      delegatesFocus: true 
    });
    
    // 添加样式重置，确保Plotly样式能正常应用
    const style = document.createElement('style');
    style.textContent = `
      :host { display: block; width: 100%; height: 100%; }
      * { box-sizing: border-box; }
    `;
    shadowRoot.appendChild(style);
    shadowRoot.appendChild(this.mountPoint);
    
    ReactDOM.render(<Sct2dClassComp />, this.mountPoint);
    retargetEvents(this.shadowRoot);
  }
  
  disconnectedCallback(){
    ReactDOM.unmountComponentAtNode(this.mountPoint);
  }
}

customElements.define('sct2d-element', Sct2dElement);

2. 调整Plotly配置 #

在React组件的config中显式声明响应式和非静态渲染，确保Plotly能正确处理容器尺寸和事件：

config : {
  displaylogo: false,
  responsive: true, // 确保图表响应容器尺寸
  staticPlot: false, // 禁用静态模式，保留交互能力
  modeBarButtonsToRemove: [
    'autoScale2d',
    'hoverClosestCartesian',
    'hoverCompareCartesian',
    'toggleSpikelines',
    'pan2d',
    'zoomIn2d',
    'zoomOut2d',
    'zoom2d',
    'lasso2d'
  ],
}

3. 手动绑定Plot事件 #

确保事件回调直接绑定到Plot实例，避免依赖React事件转发：

componentDidMount(){
  // ... 原有数据请求逻辑 ...
  
  // 手动绑定Plot事件
  setTimeout(() => {
    const plotDiv = this.mountPoint.querySelector('.plot-container');
    if(plotDiv){
      Plotly.relayout(plotDiv, this.state.layout);
      plotDiv.on('plotly_click', this.handleOnClickEvent);
      plotDiv.on('plotly_selected', this.handleOnSelectedEvent);
    }
  }, 100);
}

内容的提问来源于stack exchange，提问作者Av-