如何正确初始化在React.js组件中嵌入d3.js可调整大小图表？

在React.js组件中嵌入可调整大小的d3.js图表，可以按照以下步骤进行正确初始化：

安装依赖：首先，确保已经安装了React.js和d3.js的相关依赖包。可以使用npm或者yarn进行安装。
创建React组件：创建一个React组件，用于容纳d3.js图表。可以使用函数组件或者类组件的形式。
在组件中创建图表容器：在组件的render方法中，创建一个div元素作为d3.js图表的容器。可以给该div元素设置一个唯一的id，以便后续在d3.js中进行选择。
在组件的生命周期方法中初始化图表：在组件的生命周期方法中，例如componentDidMount方法中，使用d3.js的选择器选择之前创建的图表容器，并进行初始化操作。可以设置图表的大小、样式等。
在组件的生命周期方法中更新图表：如果需要在组件的props或state发生变化时更新图表，可以在组件的生命周期方法中，例如componentDidUpdate方法中，使用d3.js的选择器重新选择图表容器，并更新图表的数据、样式等。
在组件的生命周期方法中销毁图表：在组件的生命周期方法中，例如componentWillUnmount方法中，使用d3.js的选择器选择图表容器，并进行销毁操作，以防止内存泄漏。

以下是一个示例代码：

import React, { Component } from 'react';
import * as d3 from 'd3';

class Chart extends Component {
  componentDidMount() {
    this.initChart();
  }

  componentDidUpdate() {
    this.updateChart();
  }

  componentWillUnmount() {
    this.destroyChart();
  }

  initChart() {
    const container = d3.select('#chart-container');

    // 初始化图表，设置大小、样式等
    container
      .append('svg')
      .attr('width', '100%')
      .attr('height', '100%')
      .style('background-color', 'lightgray')
      .append('text')
      .attr('x', '50%')
      .attr('y', '50%')
      .attr('text-anchor', 'middle')
      .attr('dominant-baseline', 'middle')
      .text('Hello, D3.js!');
  }

  updateChart() {
    const container = d3.select('#chart-container');

    // 更新图表数据、样式等
    container.select('text').text('Updated Chart');
  }

  destroyChart() {
    const container = d3.select('#chart-container');

    // 销毁图表
    container.selectAll('*').remove();
  }

  render() {
    return <div id="chart-container" />;
  }
}

export default Chart;

在上述示例代码中，我们创建了一个名为Chart的React组件，其中包含了初始化图表、更新图表和销毁图表的方法。在组件的render方法中，我们创建了一个id为"chart-container"的div元素作为图表的容器。在初始化图表时，我们使用d3.js的选择器选择该容器，并添加一个svg元素和一个文本元素作为示例图表。在更新图表时，我们再次选择该容器，并更新文本元素的内容。在销毁图表时，我们选择该容器，并移除其中的所有元素。

这样，我们就可以在React.js组件中嵌入可调整大小的d3.js图表了。根据具体需求，可以根据d3.js的API进行更复杂的图表操作和交互。