Question

我正在尝试利用Plotly（基于D3）来读取CSV并将数据返回到三个单独的跟踪 - 在这种情况下每年一个。

此Pen描述了数据硬编码到JS中的预期结果：'销售'数据（y轴），汽车经销商（x轴）和年份（基本上是“分组”变量）。

Intended Output

我研究过D3读取CSV数据的例子，但我不清楚如何按年将数据读入单独的痕迹。

Plotly示例 - reading CSV
Plotly示例 - basic time series

对于它的价值，这里是sample data。

如果有人能指出我正确的方向，我将不胜感激！谢谢！

（我很抱歉，如果这是一个'简单'的问题，因为我是JavaScript新手并且很少有Plotly或D3经验。）

Answer 1

@etienne能够用这支笔（https://codepen.io/etpinard/pen/VrzwyP）指出我正确的方向

JS：

var years = ['2014', '2015', '2016']

Plotly.d3.csv('https://raw.githubusercontent.com/apodagrosi/datasets/master/PlotlyTest_Summary_SalesByDealerByYear.csv', (err, rows) => {
  var data = years.map(y => {
    var d = rows.filter(r => r.year === y)

    return {
      type: 'bar',
      name: y,
      x: d.map(r => r.dealer),
      y: d.map(r => r.sales)
    }
  })

  Plotly.newPlot('graph', data)
})

HTML：

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>

我还利用'category order'来排序没有销售（y轴）值的x轴值。

Plotly / D3 - 将CSV中的数据读入单独的迹线

1 个答案: