Reactjs React-d3图表未显示

我已在react-d3中执行了获取图表的分步说明：

我把这个添加到我的代码中，什么也看不到

然而，如果我检查，那么我确实看到一个SVG标记，其中包含一些东西

是否有某些元素已展平，或者是否需要设置一些内容以在浏览器中显示SVG

我的确切代码如下所示：

import React from 'react';

var Chart = require('react-d3-core').Chart;
var LineChart = require('react-d3-basic').LineChart;

class WelcomeView extends React.Component {

  render() {

    var chartData = [
      {"name":"Darron Weissnat IV","BMI":20.72,"age":39,"birthday":"2005-01-03T00:00:00.000Z","city":"East Russel","married":false,"index":0},
      {"name":"Guido Conroy","BMI":25.17,"age":39,"birthday":"1977-04-20T00:00:00.000Z","city":"Scarlettland","married":true,"index":20},
      {"name":"Miss Demond Weissnat V","BMI":21.44,"age":19,"birthday":"2007-06-09T00:00:00.000Z","city":"Savionberg","married":false,"index":21},
      {"name":"Easton Mante","BMI":20.61,"age":43,"birthday":"2007-01-29T00:00:00.000Z","city":"Kutchberg","married":false,"index":22},
      {"name":"Dayton Ebert","BMI":29.88,"age":20,"birthday":"1978-04-27T00:00:00.000Z","city":"West Wiley","married":true,"index":23}
    ]

    var width = 700,
      height = 300,
      margins = {left: 100, right: 100, top: 50, bottom: 50},
      title = "User sample",
      chartSeries = [
        {
          field: 'BMI',
          name: 'BMI',
          color: '#ff7f0e'
        }
      ],
      // your x accessor
      x = function(d) {
        return d.index;
      }

    return (
      <div>
          <div>
            <Chart
              title={title}
              width={width}
              height={height}
              margins= {margins}
            >
              <LineChart
                margins= {margins}
                title={title}
                data={chartData}
                width={width}
                height={height}
                chartSeries={chartSeries}
                x={x}
              />
            </Chart>
          </div>
      </div>
    );
  }
}

export default WelcomeView;

从“React”导入React；
var图表=要求（'react-d3-core'）。图表；
var线形图=要求（'react-d3-basic'）。线形图；
类WelcomeView扩展了React.Component{
render（）{
var图表数据=[
{“姓名”：“Darron Weissnat IV”，“体重指数”：20.72，“年龄”：39，“生日”：“2005-01-03T00:00:00.000Z”，“城市”：“东罗素”，“已婚”：假，“指数”：0}，
{“姓名”：“Guido Conroy”，“体重指数”：25.17，“年龄”：39，“生日”：“1977-04-20T00:00:00.000Z”，“城市”：“Scarlettland”，“已婚”：真实，“指数”：20}，
{“姓名”：“德蒙·魏斯纳特小姐V”，“体重指数”：21.44，“年龄”：19，“生日”：“2007-06-09T00:00:00.000Z”，“城市”：“萨文伯格”，“已婚”：假，“指数”：21}，
{“姓名”：“伊斯顿曼特”，“体重指数”：20.61，“年龄”：43，“生日”：“2007-01-29T00:00:00.000Z”，“城市”：“库茨伯格”，“已婚”：假，“指数”：22}，
{“姓名”：“代顿埃伯特”，“体重指数”：29.88，“年龄”：20，“生日”：“1978-04-27T00:00:00.000Z”，“城市”：“西威利”，“已婚”：真实，“指数”：23}
]
可变宽度=700，
高度=300，
边距={left:100，right:100，top:50，bottom:50}，
title=“用户示例”，
图表系列=[
{
字段：“BMI”，
名称：“BMI”，
颜色：“#ff7f0e”
}
],
//你的x存取器
x=功能（d）{
返回d.index；
}
返回(
);
}
}
导出默认视图；

我想我做的每件事都是正确的，所以我不确定我做错了什么

更新：

如果在图表元素上方动态添加另一个SVG元素，例如圆形：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

然后圆圈出现了，添加SVG元素神奇地启动了图表的渲染过程

---

我很困惑为什么会发生这种情况：（

我遵循了相同的步骤，最初也无法让它显示出来

然而，我注意到的是，在示例代码中，它们是从 他们没有将折线图嵌套在图表中（就像他们在说明中所做的那样）。一旦我删除了包含的“图表”，我的图表就会出现

返回(
)

你找到这个问题的解决方案了吗？没有，我最后换成了recharts:）