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

Question

我想开发一个 'monthly calendar' 视图，其中包含每天的径向折线图 - 每天显示不同的数据。现在我只用了 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

问题是我对所有东西都进行了相同的攻击 class ('.radial)。相反，我创建了一个新的 g 元素并将每个数据附加到它，这很有帮助。

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

React + d3 multiple charts components with different data

javascript

data-visualization

d3.js

reactjs

react-lifecycle