0

我有这个 d3 折线图：

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

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

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

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

4

1 回答 1

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 属性中的事实。有关绘制多条线的更多信息，请参见多条线 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

于 2013-03-31T16:49:13.730 回答