Question

我正在尝试使用自己的.csv数据重现nvd3.js multiBar图表。过去也曾提出过类似的问题，但是我无法帮助我解决这个问题。在不同的问题中，我已经看到使用d3.entries d3.nest和变量创建来重现正确的输入格式，但很难掌握它是如何工作的。

类似的问题： d3.js csv to nvd3 (stacked area chart) format ScatterChart in NVD3 – Reading the data from csv file d3 csv data loading

这些问题试图重现其他期望不同JSON数据格式的图表类型。我在创建＆＃34; x＆＃34;时遇到问题。和＆＃34; y＆＃34;巢中的值。在图表示例中，他们使用函数生成数据，并在函数中创建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文件。

CODE：

赞赏任何提示或解释！

Answer 1

最终预期输出并不完全清楚，但这应该让您开始或完全回答您的问题。我坚持使用基本的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>

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

1 个答案: