react d3 list数据画折线图 同一页面显示多个图表

引用

我在用react做网页前端，目前的要求是：用d3在网页画折线图，并且同一页面显示花了的多个图表。

效果

实现

下面的实现只是思路以及核心代码，全部代码可移步Github.

首先说明一下数据，每个图表都是一个通道，每个通道里面的数据都是list，将所有数据存到本地json文件中。格式如下：

{
    "0_channel":[
        -4.89354133605957e-05,
        -8.702278137207031e-06,
        .......
        -3.0100345611572266e-05,
        -2.086162567138672e-05,
    ],
    "1_channel":[...],
    ...
     "5_channel":[...]
}    

1. 在componentDidMount()函数中，从本地json读取数据，并将数据转换成所需的形式：