Javascript 向D3折线图添加交互性

背景

我正试图在D3（版本4）的基础上构建一个小型库，在该库中，我仅使用绘制以下折线图所需的最小模块数：

当前状态

我想你可以说我成功了，这是一个垃圾图书馆，但仍然。我只能使用以下工具绘制折线图：

var chart = new DataChimp.LineChart('.selector').data('apiURL').draw();

下面是一个正在进行的事情的例子

下一步是什么

我想添加交互性，以便当用户选中复选框时，我在图形上画第二条线（不同的颜色）

为什么

我从中学到的知识将用于实际绘制更有用的第二条线（例如平均线）

你试过什么

我用这种丑陋的方法（例如，抓取SVG并将其从DOM中删除），然后用两行代码重新绘制整个图形

---

我来这里是想知道是否有更好、更干净的方法。我所有的代码都是公开的。

你看过D3了吗？你应该从系列的角度来思考。当你有一个系列，你画一条线。当你有2个系列时，你画2条线，等等。@Ashitaka我现在有了，谢谢！我可以看到它们在数据点上的使用，比如

[{“x”：1.0，“y”：1.1}，{“x”：2.0，“y”：2.5}，…]

但是关于行数据？这看起来很不一样。我的

data

对象是一个2个数组，每个数组表示其中一行的数据吗？

data（）

函数应该接收一个数组

[[{x:1，y:1}，…]，…]，…]

，其中每个内部数组都包含一行的数据点。您查看过D3吗？你应该从系列的角度来思考。当你有一个系列，你画一条线。当你有2个系列时，你画2条线，等等。@Ashitaka我现在有了，谢谢！我可以看到它们在数据点上的使用，比如

[{“x”：1.0，“y”：1.1}，{“x”：2.0，“y”：2.5}，…]

但是关于行数据？这看起来很不一样。我的

data

对象是否是两个数组，每个数组表示其中一行的数据？

data（）

函数应该接收一个数组

[[{x:1，y:1}，…]，…]，…]

，其中每个内部数组都包含一行的数据点。