Javascript 具有对象数组的D3多行图

我试图构建一个D3多线图，我从

jsonArray

中获取数据，对象来自我的

JAVA

代码

下面是我得到的

JSON

如何在D3中传递此数据以获得具有以下内容的多线图：

• x轴作为日期
• y轴为

  noOfColumns

  ，以及
• z轴作为

  文件名

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

---

我自己发布这个答案来帮助别人。我在

JSON

结构中做了一些修改，并将其更改为以下内容。另外，我在

D3

上使用了

Dimple

，使它变得简单，并得到了所需的图形。下面是我使用的代码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}
]

---

var数据=；
var svg=dimple.newSvg（“图表容器”，590400）；
var myChart=new dimple.chart（svg，数据）；
我的图表.挫折（60,30,505,305）；
var x=myChart.addCategoryAxis（“x”，“日期”）；
x、 addOrderRule（“日期”）；
变量y=myChart.addCategoryAxis（“y”，“numberOfColumns”）；
var s=myChart.addSeries（“文件名”，dimple.plot.line）；
s、 插值=“基数”；
myChart.addLegend（60,10500,20，“右”）；
myChart.draw（）；

[
{"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>