1

我在访问 json 文件中的属性以生成折线图时遇到问题。json的结构如下：

    [{
    "id" : "AustraliaNewZealand" ,
    "year" : [1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "values":[477790,485825,487296,488885,502585,511718,526594,538967,550556,563572,577171,579126,591635,599216,604267,608954,615853,623685,618961,614920]
}, 
{
    "id":"CentralEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "values":[1548736,1334452,1313088,1283248,1314709,1360546,1343907,1285511,1237278,1251872,1244069,1233778,1284639,1297510,1317861,1359787,1396681,1361445,1278731,1343044]
}, 
{
    "id":"EasternEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "values":[4418516,3530464,3287987,2925644,2775181,2672238,2540975,2495036,2513372,2515375,2540796,2544848,2598148,2637682,2622241,2709974,2714204,2740248,2565213,2680226]
}, 
{
    "id":"NorthAmerica",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "values":[6750754,6821412,6948829,7059001,7166869,7386971,7460485,7509719,7573562,7790060,7675762,7710685,7769154,7896824,7918461,7841686,7966277,7751508,7277713,7493948]
}, 
{
    "id":"WesternEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "values":[4365949,4290345,4222425,4221029,4264725,4353056,4290057,4310736,4251628,4260565,4306230,4278128,4333237,4337031,4305560,4267515,4209481,4125479,3841580,3924831
]
}]

我想做的是为每个 id 生成一条线路径，其中 x 的值是年份，y 是值。除了询问我尝试开发的代码（如下）之外，我想问一下这是否是数据的最佳布局，我通常使用简单的 csv 和 tsv 并且不擅长管理 .json。我自己组装了这个数据集，所以如果有更合理的方式来组织它，我会全力以赴。但回到代码，我试图做的是行生成器中的以下内容：

var line = d3   .svg.line()
                .interpolate("linear")
                .x(function (d, i) { for (var i = 0; i >= dataset.length; i++) {
                                        return dataset[(i)].year }})        
                .y(function (d, i) { for (var i = 0; i >= dataset.length; i++) {
                    return dataset[(i)].values; }});

然后在路径中我尝试了以下操作：

var path = svg  
                .append("path")
                .attr("class", "line")
                .attr("d", line(dataset))   
                .attr("fill", "none")
                .attr("stroke", "#E37222")
                .attr("stroke-width", 0.5 + "px");

但在控制台中，我发现解析路径坐标时出现问题。由于我对整个 .json 有点陌生，所以我看了一些教程并阅读了一些指南，但无法自己解决这个问题。任何有关如何解决此问题的解释将不胜感激，谢谢！

4

1 回答 1

1

线生成器背后的想法是，你向它传递一个值列表，它会为每个值生成一个点。因此，它希望其输入是一个元素列表，而不是像您的情况那样的单个元素。.data()如果您使用 D3，您可能还应该使用通常的模式。

所以这归结为你将定义你的行如下。

var line = d3.svg.line().x(function(d,i) { return xscale(data[0].year[i]); })
                        .y(function(d) { return yscale(d); });

然后你可以像这样创建路径元素。

svg.selectAll("line").data(data).enter()
   .append("path").attr("d", function(d) { return line(d.values); });

这有点 hacky，因为您通过索引来获取年份，但是对于您当前的数据格式，这就是它的方式。

在这里完成 jsfiddle 。您可以通过在图表上为每个数据点包含一个元素的列表来使这变得更漂亮和更容易。也就是说，不是像您当前那样每行有一个元素，而是一个点（多行）是一个元素。格式是这样的。

[{year: 1990, valueAustralia: 1000, valueEurope: 2000}, {year: 1991, ...}]

然后您可以简单地为不同的行定义不同的行生成器，如下所示。

var line1 = d3.svg.line().x(function(d) { return xscale(d.year); })
                         .y(function(d) { return yscale(d.valueAustralia); }),
    line2 = d3.svg.line().x(function(d) { return xscale(d.year); })
                         .y(function(d) { return yscale(d.valueEurope); });

绘制线条的代码如下。

d3.selectAll("path.australia").data(data).enter()
  .append("path").attr("class", "australia").attr("d", line1);
// etc

您当然可以使用嵌套元素进行完全数据驱动的设计（即列表中的每个数据点都包含不同区域的值列表），这将消除对多个行生成器的需求，并使您的代码更加灵活. 我确实建议您从拥有多个生成器的更简单的解决方案开始。

于 2013-11-03T15:32:35.647 回答