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

Question

我想开发一个“月历” View ，每天都有径向折线图 - 显示每天的不同数据。现在我只用了3天，只是想尝试一下效果如何。问题是这些图表附加到了之前的 svgs，并且它们应该只在每个图表的一个单独的 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 时。

这就是示例 Prop 的样子(这部分应该是正确的):

Answer 1

问题是我正在攻击同一类('.radial)的所有内容。 相反，我创建了一个新的 g 元素并将每个数据附加到它，这很有帮助。