具有对象数组的D3多线图

Question

我正在尝试构建一个 D3多线图，我从jsonArray获取来自JAVA代码的数据。

以下是我得到的JSON。

如何在D3中传递此数据以获取多线图：

• x轴为date
• y轴为noOfColumns，和
• z轴为fileName？

我正在尝试构建一个类似于下面的图表（找到here）：

[
{"date":["2017-12-18 13:31:02.0","2017-12-13 16:00:30.0","2017-12-18 13:30:46.0"],"fileName":"Google-1","noOfColumns":[12,22,54]},
{"date":["2017-12-18 13:29:27.0"],"fileName":"Yahoo-1","noOfColumns":[44]}
]

Answer 1

自己发布此答案以帮助他人。我在JSON结构中进行了一些修改，并将其更改为以下内容。此外，我使用Dimple而不是D3来简化并获得所需的图表。下面是我使用的代码spinet

[
{"date":"2017-12-18 13:31:02.0","fileName":"Google-1","numberOfColumns":12},
{"date":"2017-12-13 16:00:30.0","fileName":"Google-1","numberOfColumns":22}
]

<script type="text/javascript" src="../../js/d3/d3.min.js"></script>
<script src="../../js/d3/dimple.v2.3.0.js"></script>
<div id="chartContainer">
 <script type="text/javascript">
  var data=<%=dataforGraphNew%>;
  var svg = dimple.newSvg("#chartContainer", 590, 400);
  var myChart = new dimple.chart(svg, data);
  myChart.setBounds(60, 30, 505, 305);
  var x = myChart.addCategoryAxis("x", "date");
  x.addOrderRule("date");
  var y = myChart.addCategoryAxis("y","numberOfColumns");
  var s = myChart.addSeries("fileName", dimple.plot.line);
  s.interpolation = "cardinal";
  myChart.addLegend(60, 10, 500, 20, "right");
  myChart.draw();
 </script>
</div>