Javascript 如何在网格系统中放置D3js图表？

我已经使用D3js和react创建了图表。我正在使用react语义ui的网格系统。我想将图表放在列中，但图表没有放在列中。在柱状图上，柱状图被放在左列，但柱状图应该在右列，但它显示在左侧，为什么

注意：我没有为piechart和barchart添加任何CSS。barchart组件返回宽度=550高度=450的svg。Piechart组件返回宽度=高度=100的svg

如何在网格系统中将柱状图放置在柱内

代码：

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;

截图：

免责声明：在另一个聊天室发布此帖子之前，此问题已得到解决。 在Reactiflux中直接与您合作，我能够创建以下codesandbox来解决您的问题

在创建新的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} />;
   }

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} />;
}

类PieChart扩展组件{
建造师（道具）{
this.pieChartRef=React.createRef（）；
}
createPieChart（）{
var数据=[2,4,8,10,1]；
var svg=d3.select（this.pieChartRef.current），
宽度=svg.attr（“宽度”），
高度=svg.attr（“高度”），
半径=数学最小值（宽度、高度）/2，
g=svg
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
……etc代码
render（）{
返回；
}

解决方案2 使用id获取要应用的元素的确切实例

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} />;
   }

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} />;
}

类PieChart扩展组件{
建造师（道具）{
}
createPieChart（）{
var数据=[2,4,8,10,1]；
var svg=d3.select（this.documentGetElementById（“饼图”），
宽度=svg.attr（“宽度”），
高度=svg.attr（“高度”），
半径=数学最小值（宽度、高度）/2，
g=svg
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
……etc代码
render（）{
返回；
}

我更喜欢解决方案一，因为它使用React来处理dom元素