Question

我跟随此示例了解multi-line graph

我想使用2010年，2011年，2012年的值来绘制我的CSV中的每个预测。

forecast.csv

forecast,2010,2011,2012
Outlook,87,88,88
Reform,50,20,88
Renewal,43,21,88

如果我的数据很简单，就像示例链接一样，构建图表的代码如下所示：

var priceline = d3.svg.line()
  .x(function(d) { return x(d.year); })
  .y(function(d) { return y(d.value); });

var dataNest = d3.nest()
    .key(function(d) {return d.forecast;})
    .entries(data);

dataNest.forEach(function(d) {

    svg.append("path")
        .attr("class", "line")
        .attr("d", priceline(d.values)); 

             console.log(dataNest)
});

但我的数据来自多列CSV。

我试图嵌套预测，因此每个预测都会有一系列年份和价值对。即

[0] Object
      [key] Outlook
      [values]
         [0] year: 2010
             value: 28
         [1] year: 2011
             value: 88

但dataNest目前看起来像这样

  [0] Object
      [key] Outlook
      [values]
         [0] 2010: 87
             2011: 88
             2012: 88

真实数据还有很多年，所以转置不是一种选择。如何从此多列CSV数据中绘制一条线？

Answer 1

您可以更改数据格式或修改d3.nest功能。但是，我认为最简单的解决方案是使用纯JavaScript来修改数组：

dataNest.forEach(function(d) {
    d.values.forEach(function(e) {
        var myArr = [];
        for (var key in e) {
            if (e[key] != d.key) {
                myArr.push({
                    "year": key,
                    "value": e[key]
                });
            }
        }
        d.values = myArr;
    })
})

这是一个演示，使用您问题中的数据：

var data = d3.csv.parse(d3.select("#csv").text());

var dataNest = d3.nest()
    .key(function(d) {
        return d.forecast;
    })
    .entries(data);

dataNest.forEach(function(d) {
    d.values.forEach(function(e) {
        var myArr = [];
        for (var key in e) {
            if (e[key] != d.key) {
                myArr.push({
                    "year": key,
                    "value": e[key]
                });
            }
        }
        d.values = myArr;
    })
})

console.log(dataNest)

pre {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<pre id="csv">forecast,2010,2011,2012
Outlook,87,88,88
Reform,50,20,88
Renewal,43,21,88</pre>

D3从多列CSV中获取数据

1 个答案: