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

Question

我已经使用 D3js 创建了图表并做出了反应。我正在使用反应语义用户界面的网格系统。我想将图表放在列内，但图表没有放在列内。在条形图上被放置在左列但饼图应该在右列但它显示在左侧为什么会这样？

注意：我没有为饼图和条形图添加任何 CSS。条形图组件返回宽度 = 550 高度 = 450 的 svg。饼图组件返回 width=height=100 的 svg

如何将饼图放置在网格系统的列内？

代码：

仪表板.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;

仪表板.module.css：

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

截屏：

标签： javascripthtmlcssreactjs

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 元素。