如何将D3js图表放置在网格系统内？

Question

我已经使用D3js创建了图表并做出了反应。我正在使用反应语义ui的网格系统。我想将图表放置在列内，但图表未放置在列内。在barchart上，它应该放在左列，但在右边的图中应该有piechart，但是为什么在左边显示呢？

注意：我没有为piechart和barchart添加任何CSS.Barchart组件返回的svg为width = 550 height = 450。 Piechart组件返回svg，其中width = height = 100

如何将Piechart放置在网格系统的列中？

代码：

dashboard.js

import React, { Component } from 'react';
import { Card, Icon, Image, Grid } from 'semantic-ui-react';
import styles from './dashboard.module.css';
import BarChart from './barchart';
import PieChart from './piechart';

const DashBoard = () => (
    <Grid columns='two' divided className={styles.container}>
    <Grid.Row>
      <Grid.Column>
            <BarChart/>
      </Grid.Column>
      <Grid.Column>
            <PieChart/>
      </Grid.Column>
    </Grid.Row>
  </Grid>
)

export default DashBoard;

dashboard.module.css：

.container {
    margin-left: 100px !important;
    margin-top: 100px !important;
    margin-right: 100px !important;
    height: 400px;
}

屏幕截图：

Answer 1

免责声明：此问题在发布之前已在另一个聊天室中解决。

在Reactiflux中直接与您合作，我能够创建以下代码和框来解决您的问题。 https://codesandbox.io/s/m45q494r2x

似乎在创建新的d3元素时正在执行以下操作：

   var svg = d3.select("SVG"),
  width = svg.attr("width"),
  height = svg.attr("height"),
  radius = Math.min(width, height) / 2,
  g = svg
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

您正在选择SVG的第一个实例并将其添加到其中。当您将任何一个图表放在一起时，他们使用的是他们发现的相同和第一 svg。

您可以使用一些解决方案。

解决方案一

使用react ref也可以获取要应用的SVG的确切实例。

class PieChart extends Component {
 constructor(props) {
 this.pieChartRef = React.createRef();
}
createPieChart() {
var data = [2, 4, 8, 10, 1];
var svg = d3.select(this.pieChartRef.current),
  width = svg.attr("width"),
  height = svg.attr("height"),
  radius = Math.min(width, height) / 2,
  g = svg
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  ....etc code 
   render(){
    return <svg ref={this.pieChartRef} width={100} height={100} />;
   }

解决方案2

使用ID来获取您也要应用的元素的确切实例。

class PieChart extends Component {
 constructor(props) {
}
createPieChart() {
 var data = [2, 4, 8, 10, 1];
 var svg = d3.select(this.documentGetElementById("pie-chart")),
  width = svg.attr("width"),
  height = svg.attr("height"),
  radius = Math.min(width, height) / 2,
  g = svg
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  ....etc code 
render(){
 return <svg id="pie-chart" width={100} height={100} />;
}

任何代码都可以满足您的需要。我更喜欢解决方案一，因为它使用React处理dom元素。