Javascript 反应+；d3具有不同数据的多个图表组件

我想开发一个“月历”视图，其中包含每天的径向折线图-显示每天的不同数据。现在我只用了3天，只是想试试它的工作原理。问题在于，这些图形将附加到以前的svg，并且对于每个图形，它们应该在一个单独的svg中只呈现一次

以下是生成图形的组件： 下面是日历组件：

日历组件现在有3个图表组件：

<CalendarRadial currentDay={'2017-03-03'}
          dataDayHours={dataParser.getDayHoursArr(this.props.monthData, '2017-03-03')}
          dayInsights={this.props.monthData}
          lineType={this.props.lineType}
          clockConfig={this.props.clockConfig} />
        <CalendarRadial currentDay={'2017-03-04'}
          dataDayHours={dataParser.getDayHoursArr(this.props.monthData, '2017-03-04')}
          dayInsights={this.props.monthData}
          lineType={this.props.lineType}
          clockConfig={this.props.clockConfig} />
        <CalendarRadial currentDay={'2017-03-05'}
          dataDayHours={dataParser.getDayHoursArr(this.props.monthData, '2017-03-05')}
          dayInsights={this.props.monthData}
          lineType={this.props.lineType}
          clockConfig={this.props.clockConfig} />

我认为问题在于呈现svg时

---

这就是示例道具的样子（这部分应该是正确的）：

问题是我将所有东西都附加到了同一个类（'.radial）。

---

相反，我创建了一个新的g元素，并将每个数据附加到其中，这很有帮助

问题是我把所有东西都连接到同一个类（'.radial）。 相反，我创建了一个新的g元素，并将每个数据附加到其中，这很有帮助