Jquery D3和酒窝折线图

我仍然对D3有感觉，但我一直在做一个项目，我想把数据吐到D3/dimple模块来绘制图表，并由用户添加一些参数

我尝试过用两种不同的方式格式化数据，结果好坏参半

//Not working
var data = [
{"College":"Central Michigan University","1990-tuition":"2000.00","1991-tuition":"2500.00","1992-tuition":"3000.00","1993-tuition":"3500.00","1994-tuition":"4000.00","1995-tuition":"4500.00","1996-tuition":"5000.00","1997-tuition":"5500.00","1998-tuition":"6500.00","1999-tuition":"7000.00","2000-tuition":"7500.00"},
{"College":"Eastern Michigan University","1990-tuition":"2500.00","1991-tuition":"3000.00","1992-tuition":"3500.00","1993-tuition":"4000.00","1994-tuition":"4500.00","1995-tuition":"5000.00","1996-tuition":"5500.00","1997-tuition":"6500.00","1998-tuition":"7000.00","1999-tuition":"7500.00","2000-tuition":"8000.00"},
];

我更喜欢第一种检索数据的方法。我所有的数据都是可变的。在数据集之间，字段名称会发生变化。在这本书中，每个记录都是一所大学，每年都有学费

//Working
data2 = [
{"College":"Central Michigan University","Year": "1990", "Tuition":"2000.00"},
{"College":"Central Michigan University","Year": "1991", "Tuition":"2500.00"},
{"College":"Central Michigan University","Year": "1992", "Tuition":"3000.00"},
{"College":"Central Michigan University","Year": "1993", "Tuition":"3500.00"},
{"College":"Central Michigan University","Year": "1994", "Tuition":"4000.00"},
{"College":"Central Michigan University","Year": "1995", "Tuition":"4500.00"},
{"College":"Central Michigan University","Year": "1996", "Tuition":"5000.00"},
{"College":"Central Michigan University","Year": "1997", "Tuition":"5500.00"},
{"College":"Central Michigan University","Year": "1998", "Tuition":"6000.00"},
{"College":"Central Michigan University","Year": "1999", "Tuition":"6500.00"},
{"College":"Central Michigan University","Year": "2000", "Tuition":"7000.00"},
{"College":"Eastern Michigan University","Year": "1990", "Tuition":"2500.00"},
{"College":"Eastern Michigan University","Year": "1991", "Tuition":"3000.00"},
{"College":"Eastern Michigan University","Year": "1992", "Tuition":"3500.00"},
{"College":"Eastern Michigan University","Year": "1993", "Tuition":"4000.00"},
{"College":"Eastern Michigan University","Year": "1994", "Tuition":"4500.00"},
{"College":"Eastern Michigan University","Year": "1995", "Tuition":"5000.00"},
{"College":"Eastern Michigan University","Year": "1996", "Tuition":"5500.00"},
{"College":"Eastern Michigan University","Year": "1997", "Tuition":"6000.00"},
{"College":"Eastern Michigan University","Year": "1998", "Tuition":"6500.00"},
{"College":"Eastern Michigan University","Year": "1999", "Tuition":"7000.00"},
{"College":"Eastern Michigan University","Year": "2000", "Tuition":"7500.00"}
];

这个JSON有效，但以这种方式导出它将是。。。多余的感觉。我宁愿像第一套一样优化它

我能用这个吐出我的数据

var svg = dimple.newSvg(".chartMe", 590, 400);
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var chartData = dimple.filterData(data2, "College", ["Central Michigan University", "Eastern Michigan University"]);
var myChart = new dimple.chart(svg, chartData);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Year");
x.addOrderRule("Year");
myChart.addMeasureAxis("y", "Tuition");
myChart.addLegend(60, 10, 500, 20, "right");
myChart.addSeries("College", dimple.plot.line);
myChart.draw();

问题是我不喜欢数据结构，但我对D3或Dimple不够熟悉，不知道我真正想要的是数据。例如，在过滤器上，如果没有二级过滤器，我无法让它工作，特别是选择两所大学，我宁愿不这样做。我也不知道如何设置线条颜色

---

这里有一个测试链接：

第二种数据格式是dimple的要求。这是dimple能够支持聚合和图表灵活性的一个重要因素

第一种格式非常接近于在NVD3中为折线图提供数据所需的方式，因此您可能会更幸运地使用该库：

也许这是一种适应：

关于dimple的过滤器，如果不想使用，您不需要使用它们，只需将数据直接传递到图表中即可

---

设置颜色时使用的方法是专门根据值进行分配，或者您可以更改，并从您提供的集合中分配颜色。在您的示例中，两行颜色相同，因为css中有.line{stroke:steelblue}。

dimple.filterData需要三个参数，因此将第三个参数设置为“null”解决了强制筛选的问题。谢谢，这实际上是有用的信息。我正在构建的工具的本质是，我已经一次发送一系列数据，至少这是我可以发送数据的最有效的方式。我对D3还是个新手。我一直在尽可能深入研究它，但它有很多方面，所以我仍在探索它的各种功能。我认为找到这些东西想要的合适的数据结构是迄今为止最大的挑战。我必须检查nvd3，我真的很喜欢这个例子。我真的在寻找一些非常可定制的东西。刚刚开始使用NVD3，那一个就赢了，不用动手。数据的格式正是我想要的，定制的层次也很完美。作为dimple的作者，我不确定我是否完全同意这种观点，但它似乎更适合您的特殊要求：）老实说，我对dimple印象深刻。在我的例子中，是数据的方法将我带到了NVD3。我用PHP处理我所有的数据，所以基本上是一次一系列地吐出来。当您拥有大型数据集，并且希望让JS进行排序时，Dimple看起来非常理想。我肯定会给你一些关于过滤的道具，这一切都有点超出我的理解。我想真正让我担心的是，我有报告说，当使用dimple时，会很容易地推送30000个数组元素，这让我担心浏览器能够及时处理这么多。