在Bootstrap 4 React中使用d3

如何解决在Bootstrap 4 React中使用d3

我正在尝试创建一个网页，该网页具有多个d3图表，这些图表堆叠在页面中间。我为此使用了Bootstrap4React，该功能基本上与Bootstrap网格系统相同，但是组件没有完全在页面下对齐，而是完全忽略了行和列。

render = () => {
return (
  <Container fluid>
    <Row>
      <Col col="col lg-auto">
        <BarChartScaled
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          id={this.state.id}
          color="red"
        />
      </Col>
    </Row>

    <Row>
      <Col col="col lg-auto">
        <BarChart
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          id={this.state.id}
          color="green"
        />
      </Col>
    </Row>
  </Container>
);
};

组件之一：

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

class BarChart extends Component {
componentDidMount = () => {
    this.drawChart();
}

drawChart = () => {
    const {data,width,height,color,id} = this.props;
    const barspace = width / data.length;
    const barWidth =  barspace * 0.9;

    const svg = d3.select('#' + id)
        .append("svg")
        .attr("width",width)
        .attr("height",height)
        .attr("style","outline: thin solid black;")
        .style("margin-left",0)
        
    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x",(d,i) => i * barspace)
        .attr("y",i) => height - (15 * d))
        .attr("width",barWidth)
        .attr("height",i) => d * 15)
        .attr("fill",color);

    svg.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text((d) => d)
        .attr("x",i) => (i * barspace) + 5)
        .attr("y",i) => height - (15 * d) - 3);
}

render = () => { 
    return (
        <div id={this.props.id}></div>
    );
}
}

export default BarChart;

它看起来似乎并不复杂，但是我很固执！谢谢。