React + d3 具有不同数据的多个图表组件

Question

我想为每一天开发一个带有径向折线图的“月历”视图 - 每天显示不同的数据。现在我只用了3天，只是想试试它是如何工作的。问题是这些图被附加到以前的 svg 上，并且它们应该只在每个图的一个单独的 svg 中呈现一次。

这是生成图表的组件： https ://pastebin.com/hzRwNhNh 这是日历组件：https ://pastebin.com/m6qd1z3m

日历组件现在有 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 时。

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

Answer 1

问题是我将所有内容都附加到同一个类（'.radial）。相反，我创建了一个新的 g 元素并将每个数据附加到它上面，这很有帮助。