D3 多系列折线图从 tsv 文件中获取我的国家数据答案

【问题标题】：D3 Multi Series Line Graph getting my countries data from tsv fileD3 多系列折线图从 tsv 文件中获取我的国家数据
【发布时间】：2014-04-19 08:39:03
【问题描述】：

我正在尝试按照 Bostock 关于城市和温度的示例将多条折线图制作成一个。

示例就在这里http://bl.ocks.org/mbostock/3884955

现在，我有一个根据世界数据库信息定制的 tsv 文件。格式如下

Country Name    Year    GDP Population  GDP per Capita  Exports Industry
Brazil  2004    663760341880.342    184010283   3607.1915713555 16.4250921582   30.1135838508
Brazil  2005    882185702547.247    186142403   4739.3054367481 15.1283508131   29.27296088
Brazil  2006    1088916819852.94    188134315   5787.9755740091 14.3684508393   28.7527649158
Brazil  2007    1366853244424.28    189996976   7194.0789437843 13.3643803148   27.8112224671
Brazil  2008    1653538618144.8 191765567   8622.7086750397 13.6631968034   27.901606309
Brazil  2009    1620165226993.77    193490922   8373.3397424907 10.9789949015   26.8288327492
Brazil  2010    2143035333258.24    195210154   10978.093553772 10.8715851234   28.0694513261
Brazil  2011    2476652189879.72    196935134   12575.9794079188    11.8891676714   27.5330208705
Brazil  2012    2252664120777.39    198656019   11339.5211084814    12.557350455    26.2886840461

我在不同年份有多个国家/地区的输入。格式是这里另一个帖子问题的答案的建议

D3 Getting values from keys using array of objects

此 TSV 文件用于在单独的 svg 图表上绘制 GDP、人口等；为方便起见，我将其放入一个 tsv 文件中。现在，我的下一步是从我的数据中提取国家并将它们绘制成线条。该示例将城市作为标题行中的键，由 d3.keys 调用解析。但是，我的国家/地区位于一个名为 Country Name 的键中，如上所示。我将如何解析我的数据以便为每个国家/地区获得一条线？

这是我目前在编码方面的情况

//Define Margin Object with properties from the four sides Clockwise
var margin = {top: 20, right: 80, bottom: 30, left: 50};
var dataset;

//Width and Height as inner dimensions of chart area
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

//Define svg
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([0, height]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) {return x(d.year);})
    .y(function(d) {return y(d.GDP);});

d3.tsv("OlympicsData.tsv", function(error, data) {
    x.domain(d3.extent(data, function(d) {return d["Year"];}));
    y.domain(d3.extent(data, function(d) {return d["GDP"];}));

    console.log(d3.min(data, function(d) {return d["Year"];}) + " " + d3.max(data, function(d) {return d["Year"];}));

    svg.append("g")
    .attr("class", "x axis")
    .call(xAxis);

    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
});

【问题讨论】：

你能用硬编码的数据在jsFiddle上做一个演示吗？
我很遗憾不能，因为我专注于尝试读取这些数据。我需要使用 jsFiddle 有什么令人困惑的地方？
所以基本上你的问题只是像你上面引用的 Bostock 的例子那样格式化数据？在他的示例中，每一行都是一列，而在您的每个国家/地区都有多个行条目。对吗？
是的。他还使用他的列并使用映射函数来获取实际数据和温度。对我来说，由于每一行都是同一个国家、不同的年份和不同的 GDP/人口/ 等值，所以我不能完全理解这一点。他还使用对 var city 的调用来创建他的台词。

标签： javascript svg d3.js linegraph

【解决方案1】：

要使用 d3 创建多折线图，您需要

创建一个顶级数据数组，每个数据系列都有一个条目（即图表上的每一行）；和
为每个数据系列创建一个 (x,y) 点数组，其中包含标准格式的系列数据。

当您的数据采用表格格式时，每个系列都位于单独的列中，如果您可以硬编码一个列名数组来表示您想要用作数据系列的列，这将变得更加容易。

var seriesNames = ["GDP", "Population", "GDP per Capita", "Exports", "Industry"];

如果您不想在所有系列名称中硬编码，您至少需要知道将用于 x 值的列的名称以及不包括的任何其他列的名称。然后您可以从d3.keys(data[0]) 中获取所有列的名称，并使用数组过滤器去除“年份”和“国家名称”值。您链接到的 Mike Bostock 示例在设置色标域时执行此操作，然后从 color.domain() 获取数组以供将来使用：

color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

我觉得这很混乱，会先将名称数组保存在一个变量中，然后用它来设置色标的域：

var seriesNames = d3.keys(data[0]).filter(function(key) { 
                                    return key !== "date"; 
                                     //you would have to change the name(s) to exclude
                                 });
color.domain( seriesNames );

无论您是硬编码还是动态创建它，您都可以使用您的系列名称数组来创建您的数组数组：

var series = seriesNames.map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {x: d.year, 
                y: +d[name] };
      })
    };
});

数组map 函数创建一个新数组，其中每个条目都是将相应条目从起始数组传递给映射函数的结果。此代码使用两级映射：外部函数获取您的系列名称并返回一个数据对象，内部函数获取原始数据数组并仅提取与该系列相关的值，然后您可以使用标准化名称在您的其余代码中。

这应该可以帮助您入门，但是您的数据中存在一个复杂性，而您正在使用的示例中没有：您的数据系列都代表完全不同类型的数字，具有完全不同的比例。我不确定您打算如何处理在同一张图表上绘制所有这些值的图形，但一种选择是绘制从起始年份开始的百分比变化。您可以在数据映射函数中进行该计算：

var series = seriesNames.map(function(name) {
    var initialValue = +data[0][name];
    return {
      name: name,
      values: data.map(function(d) {
        return {year: d.year, 
                percentChange: (+d[name] / initialValue) };
      })
    };
});

【讨论】：