【问题标题】:D3 Getting values from keys using array of objectsD3使用对象数组从键中获取值
【发布时间】:2014-03-14 00:43:32
【问题描述】:

因此,我阅读了有关国家/地区 GDP 的 csv 文件,并过滤掉了不需要的列和国家/地区。现在我想知道如何从这个对象数组中提取值并使用它们为多系列折线图创建 x 轴和 y 轴。这是我的代码

    function country(element) {
    return element.CountryName == "Brazil" ||
            element.CountryName == "China" ||
            element.CountryName == "Russian Federation" ||
            element.CountryName == "United Kingdom" ||
            element.CountryName == "United States" ||
            element.CountryName == "Germany";
}
d3.csv("GDP.csv", function(d) {
    return {
        CountryName : d["Country Name"],
        Indicator : d["Indicator Name"],
        y2004 : d["2004"],
        y2005 : d["2005"],
        y2006 : d["2006"],
        y2007 : d["2007"],
        y2008 : d["2008"],
        y2009 : d["2009"],
        y2010 : d["2010"],
        y2011 : d["2011"],
        y2012 : d["2012"]
    };
},
    function(error, rows) {
    //document.write(rows);
    dataset = rows;
    var filtered = dataset.filter(country);
    console.log(filtered);

    //Code to create axes and map keys
});

现在我有一个由 6 个对象组成的数组,每个对象在特定命名的键处都有值。我看到的示例通常从文件的标题行中读取键值,但是我将如何处理这种尝试呢?

X 轴代表 2004-2012 年,它们是列名和键值。 Y 轴是那些年份的这些值的范围。生成的 6 行适用于每个国家/地区。

我要遵循的示例是http://bl.ocks.org/mbostock/3884955

我需要解析日期吗?我不这么认为,因为我只是在处理年份数字,它们是关键值,而不是关键值。谢谢。

【问题讨论】:

    标签: javascript arrays csv d3.js linechart


    【解决方案1】:

    我会组装我的数据,以便每个点都有 4 个键:

    {country:"Germany", indicator:"...",  year:2004, value:55}
    

    而不是每年都有钥匙。只需对您的 csv 调用进行后处理即可。

    当您这样做时,确定最小/最大年份和最小/最大值。

    接下来,您使用 [minYear, maxYear] 的域构建一个年刻度(x 轴)。接下来使用 [minValue, maxValue] 的域为 y 轴构建一个值标度。

    【讨论】:

      【解决方案2】:

      D3 想要使用具有相同键集的对象数组。如果必须,请进行预处理阶段,将数据修改为如下所示的内容:

      [
          { key: value, key2: value },
          { key: value, key2: value },
          { key: value, key2: value },
          { key: value, key2: value },
          { key: value, key2: value }
      ]
      

      否则,您将无法使用 D3,因为该工具包的大多数函数式编程功能对您根本不起作用。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-09-02
        相关资源
        最近更新 更多