Question

我仍然对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不太熟悉，知道我真的想要处理数据。例如，在过滤器上，我无法在没有辅助过滤器的情况下使用它，具体选择两个学院，而我不必这样做。我也无法找到如何设置线条颜色。

这是一个测试链接：http://www.freeptools.com/mapster/test.php

Answer 1

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

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

也许对此进行某种调整：http://nvd3.org/examples/cumulativeLine.html

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

使用chart.assignColor方法设置颜色以根据值进行专门分配，或者您可以更改chart.defaultColors，它们将从您提供的集合中分配。在你的例子中，两条线都是相同的颜色，因为你的css中有.line {stroke：steelblue}。

D3和凹痕线图

1 个答案: