断开d3折线图？

Question

我有这个 d3 折线图：

http://jovansfreelance.com/bikestats/d3/tipsy.php

你可以在那里看到 JS 源代码，它位于http://jovansfreelance.com/bikestats/d3/js/d3LineChart.js。

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

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

Answer 1

您需要更改数据的结构。正如现在所写，generateData() 函数采用 20 个值并将它们推送到同一个数组中。这导致 data 变量是具有以下结构的对象数组：

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 值嵌套在每个系列对象的 points 属性中的事实。有关绘制多条线的更多信息，请参阅multiple lines d3。

在回复评论时添加：

将原始数据元素一次分配给数据的大小循环是问题所在。它与 d3 处理数据的方式背道而驰。在第一个循环中，d3 为数据数组中的 7 个元素输入 7 个路径和圆圈。

.enter() 仅根据数据数组的变化添加新的 svg 元素。如果未使用任何键，则更改由数组长度驱动。由于数据数组的长度在循环的第二次和第三次都没有改变，所以没有添加新的路径。

要获取所有三行，删除循环，使用.data(rawdata) 作为数据并将行'd' 属性更改为.attr('d', line(d.points))。

不幸的是，这会使圈子变得混乱。如需在相同数据上绘制圆圈和线条的帮助，请查看此 Google 群组讨论中的 Mike Bostocks svg:g 元素建议https://groups.google.com/forum/?fromgroups=#!topic/d3-js/8XLzUYLoFnY