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

Question

I want to develop a 'monthly calendar' view with radial line charts for each day - displaying different data for each day. Right now I only used 3 days, just to try how would it work. The problem is that the graphs are getting attached to the previous svgs and they should be rendered only once in one separate svg for each of the graphs.

Here is the component that generates the graph: https://pastebin.com/hzRwNhNh And here is the Calendar component: https://pastebin.com/m6qd1z3m

Calendar component has now 3 charts components:

<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} />

I assume the problem is when rendering svg.

This is how example props look like (this part should be correct):

Answer 1

The problem was that I was attaching everythin to the same class ('.radial). Instead I created a new g element and appended each data to it and this helped.