Javascript 断开d3折线图？

我有这张d3折线图：

你可以在那里看到JS源代码，它位于

我向页面添加了一个警报，以便在页面加载时向数据对象发出警报。如您所见，我每年都有多个值。这很好，图表看起来应该是这样的，除了2012年的值不应该连接回2006年的值

---

基本上，我的问题是，如何在某些地方断开图形？每次x轴值为2012时，我都需要断开图形连接（不显示从2012年到2006年的线）。

您需要更改数据的结构。正如现在所写的，函数

generateData（）

接受20个值并将它们推送到同一个数组中。这将导致数据变量成为具有以下结构的对象数组：

data = [
  { value: "253.65", date: "2006"},
  { value: "269.67", date: 2007 },
...
];

这种数据结构导致d3从2006年到2012年绘制一条连接线，然后再回到2006年两次

要获得三条不同的线，需要将数据分解，以便d3将每个序列识别为一个不同的对象。考虑把你的数据变成这样的结构：

data = [
{
    name: "series01",
    points: [ 
        { value: "253.65", date: "2006"},
        { value: "269.67", date: 2007 },
        ...
    ]
},
{
    name: "series02",
    points: [ 
        { value: "253.65", date: "2006"},
        { value: "269.67", date: 2007 },
        ...
    ]
},
{
    name: "series01",
    points: [ 
        { value: "253.65", date: "2006"},
        { value: "269.67", date: 2007 },
        ...
    ]
}

])

当然，如果执行此操作，则需要重写其他d3组件，以处理圆的x和y值嵌套在每个系列对象的“点”属性中这一事实。有关绘制多条线的详细信息，请参见

在回复评论时添加：

将rawdata元素一次分配给一个数据的size循环就是问题所在。它与d3处理数据的方式相反。在第一个循环中，d3为数据数组中的7个元素输入7条路径和圆

.enter（）

仅根据数据数组中的更改添加新的svg元素。如果未使用关键点，则更改由阵列长度驱动。由于数据数组的长度在循环的第二次和第三次不会改变，因此不会添加新路径

要获取所有三行，请删除循环，对数据使用

.data（rawdata）

，并将行“d”属性更改为

.attr（'d'，行（d.points））

---

不幸的是，这会把圈子搞得一团糟。有关在同一数据上绘制圆圈和线条的帮助，请查看此google groups讨论中的Mike Bostocks svg:g元素建议

您链接到的图表不适用于我。看起来你正在尝试访问一个不存在的d3库？它正在工作，至少在Firefox中，你只需单击警报上的“确定”并等待一两秒钟。它在Firefox中工作，但在safari或chrome中不工作。谢谢。我重组了我的数据。然而，我在实际绘制几条线时遇到了困难。如果我对绘制图形的整个零件进行for循环，它只绘制最后一行。您能告诉我如何修改当前代码以显示所有行吗？