如何为第1列中的每个唯一项创建包含系列的多系列折线图?

我检查了各种教程,但找不到我的用例。

以下是CSV格式的数据集的子集:

Provider,Service date,Unique patients seen 10800,2007-12-03,1 10800,2008-03-21,9 10800,2008-04-16,3 10800,2008-04-18,6 11451,2008-06-27,24 11451,2008-07-10,1 11451,2008-07-14,31 11451,2008-07-15,6 12980,2008-06-17,24 12980,2008-06-27,14 12980,2008-06-28,24 13907,2008-05-04,23 13907,2008-05-05,20 13907,2008-05-08,6 14618,2008-08-27,27 14618,2008-09-04,21 14618,2008-09-05,20 

我想要的是每个独特的提供者都有一个系列,该系列的X轴为服务日期,Y轴为患者。

到目前为止,我已经查看了多系列折线图教程 ,但我无法说服它使用我拥有的数据而不是现在使用的数据。

有什么建议或读物吗?

tarek 🙂

您可以在http://jsfiddle.net/YHW6H/1/上看到一个工作示例。

我做了以下几点来强制你的数据。 您将要使用d3.csv读取您的csv文件,但我对该示例的值进行了硬编码。

 // you would use d3.csv('filename.csv', function (data) {...}) // in order to populate the data variable, I'm just hard coding it here var data = [ {Provider:'10800', 'Service Date': '2007-12-03', 'Unique patients seen':'1'}, {Provider:'10800', 'Service Date': '2008-03-21', 'Unique patients seen':'9'}, {Provider:'10800', 'Service Date': '2008-04-16', 'Unique patients seen':'3'}, {Provider:'10800', 'Service Date': '2008-04-18', 'Unique patients seen':'6'}, {Provider:'11451', 'Service Date': '2008-06-27', 'Unique patients seen':'24'}, {Provider:'11451', 'Service Date': '2008-07-10', 'Unique patients seen':'1'}, {Provider:'11451', 'Service Date': '2008-07-14', 'Unique patients seen':'31'}, {Provider:'11451', 'Service Date': '2008-07-15', 'Unique patients seen':'6'}, {Provider:'12980', 'Service Date': '2008-06-17', 'Unique patients seen':'24'}, {Provider:'12980', 'Service Date': '2008-06-27', 'Unique patients seen':'14'}, {Provider:'12980', 'Service Date': '2008-06-28', 'Unique patients seen':'24'}, {Provider:'13907', 'Service Date': '2008-05-04', 'Unique patients seen':'23'}, {Provider:'13907', 'Service Date': '2008-05-05', 'Unique patients seen':'20'}, {Provider:'13907', 'Service Date': '2008-05-08', 'Unique patients seen':'6'}, {Provider:'14618', 'Service Date': '2008-08-27', 'Unique patients seen':'27'}, {Provider:'14618', 'Service Date': '2008-09-04', 'Unique patients seen':'21'}, {Provider:'14618', 'Service Date': '2008-09-05', 'Unique patients seen':'20'} ]; // first we need to coerce the data into the right formats and make the // names a little more sane data = data.map( function (d) { return { provider: +d.Provider, // the + sign will coerce strings to number values date: new Date(d['Service Date']), patients: +d['Unique patients seen'] }; }); // then we need to nest the data on Provider since we want to only draw one // line per provider data = d3.nest().key(function(d) { return d.provider; }).entries(data); 

不幸的是,您提供的数据并不像图表那么有趣,因为提供商并没有真正重叠。 一旦你加载了所有数据,它应该看起来更好:)

简短的回答是将您的数据重新处理为d3可以处理的格式。

不包括示例的道歉,但在移动设备上键入代码是猪

这是一个完整的,有效的例子,包括上面的数据。 图表存在一个问题,即不同的提供商没有不同的颜色。 就个人而言,我不确定如何解决这个问题。谢谢大家的帮助。