带有对象数组的 D3 多线图

【问题标题】：D3 multiline graph with Array of objects带有对象数组的 D3 多线图
【发布时间】：2018-06-11 22:39:15
【问题描述】：

我正在尝试构建一个 D3 多线图，我从 jsonArray 的 Object 获取数据，该数据来自我的 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]}
]

【问题讨论】：

标签： javascript json d3.js graph

【解决方案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>

【讨论】：