在nvd3 multiBar图表示例（JSON格式）中使用d3.csv加载csv数据

Chris 发表于 Dev

克里斯

我正在尝试使用自己的.csv数据重现nvd3.js multiBar图表。过去曾提出过类似的问题，但一直无法帮助我解决该特定问题。在另一个问题中，我看到了使用d3.entries d3.nest和变量创建来重现正确的输入格式，但是很难理解它的工作方式。

相似的问题：d3.js将csv转换为nvd3（堆积面积图）格式 NVD3中的ScatterChart –从csv文件中读取数据 d3 csv数据加载

这些问题试图重现期望使用不同JSON数据格式的其他图表类型。我在嵌套中创建“ x”和“ y”值时遇到问题。在图表示例中，他们使用函数来生成数据，并在函数中创建x（条形数）和y（实际输入）值。

我希望复制此图：http : //nvd3.org/examples/multiBar.html

使用此csv数据：

date,Equipment:Electricity:LGF,Equipment:Electricity:GF,Equipment:Electricity:1st,Equipment:Electricity:2nd
jan,6726.864146,5648.080727,2598.709507,2042.260163
feb,6405.091236,5377.910358,2474.402801,1944.570663
mar,6727.448125,5648.571054,2598.935109,2042.437457
apr,6433.12227,5401.446071,2485.231698,1953.080819
may,6993.742947,5872.160325,2701.809623,2123.28394
jun,6433.12227,5401.446071,2485.231698,1953.080819
jul,6727.448125,5648.571054,2598.935109,2042.437457
aug,6993.742947,5872.160325,2701.809623,2123.28394
sep,6166.827448,5177.8568,2382.357183,1872.234336
oct,6993.742947,5872.160325,2701.809623,2123.28394
nov,6699.417092,5625.035342,2588.106212,2033.927301
dec,6167.411428,5178.347127,2382.582785,1872.411631

它期望这种类型的数据为JSON格式（实际版本具有更多数据）：

[
  {
    "key": "Stream #0",
    "values": [
      {
        "x": 0,
        "y": 0.4428573444644372
      },
      {
        "x": 1,
        "y": 1.1148710782512004
      },
      {
        "x": 2,
        "y": 1.4665579659689634
      }
    ]
  },
  {
    "key": "Stream #1",
    "values": [
      {
        "x": 0,
        "y": 0.14053699714131654
      },
      {
        "x": 1,
        "y": 0.1493057878687978
      },
      {
        "x": 2,
        "y": 0.12193947387887433
      }
    ]
  }
]

我一直在尝试从类似的问题中得到答案，结果之一是：http : //i.imgur.com/lNcXLSp.png，其中左侧是我从其中一个示例中进行的尝试，而右侧是我在示例中的尝试加载了JSON文件。

码：

任何提示或解释表示赞赏！

及时投资

在最终的预期输出结果上并不清楚，但这应该可以帮助您入门或完全回答您的问题。我坚持使用基本的Javascript进行数据转换，以期使其更易于理解。

要查看工作版本，请参见http://bl.ocks.org/timelyportfolio/c7c9dbc75975df7322bd。

    <script src = "http://d3js.org/d3.v3.js"></script>
    <script src = "http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script>

    <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">


    <div id = "chart1">
      <svg></svg>
    </div>

    <script>
        d3.csv("data.csv",function(err,data){

          //get each key of the data that is not date
          //these will be our key in the key/value pair
          //the values x and y will be month and the value
          var dataToPlot = Object.keys(data[0]).filter(function(k){return k!="date"})
            .map(function(k){
              return {"key":k,"values":data.map(function(d){
               return {
                 //let's make this a real date
                 "x":d3.time.format("%Y-%b-%d").parse("2014-" + d.date + "-01"),
                 "y":+d[k]
               }
              })}
            })

          nv.addGraph(function() {
            var chart = nv.models.multiBarChart()
              .transitionDuration(350)
              .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
              .rotateLabels(0)      //Angle to rotate x-axis labels.
              .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
              .groupSpacing(0.1)    //Distance between each group of bars.
            ;

            chart.xAxis
                .tickFormat(d3.time.format('%b'));

            chart.yAxis
                .tickFormat(d3.format(',.1f'));

            d3.select('#chart1 svg')
                .datum(dataToPlot)
                .call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
          });

        })



    </script>

    </html>