javascript - 如何格式化dimple.js的时间

Question

我正在尝试基于示例代码使用 dimple.js 绘制多线图。我已将 JSON 扁平化为数组，我以为我理解了代码，但我什么也没得到。

我正在引用这 2 个库(使用 cloudflare 凹坑，因为我的系统不允许不安全的链接):

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.1.6/dimple.latest.min.js"></script>

我已经像这样格式化了我的数据(如下)。这些数据应该给我两条完全独立的水平线，一条代表“所有事物”，另一条代表“更多”。

coordinates = [{"title":"ALL the things","date":"2017-11-14T00:00:00.000Z","hours":0.5},
               {"title":"ALL the things","date":"2017-11-20T00:00:00.000Z","hours":0.5},
               {"title":"More","date":"2017-11-27T00:00:00.000Z","hours":0.91},
               {"title":"More","date":"2017-12-04T00:00:00.000Z","hours":0.91},
               {"title":"More","date":"2017-12-11T00:00:00.000Z","hours":0.91},
               {"title":"More","date":"2017-12-18T00:00:00.000Z","hours":0.91},
               {"title":"More","date":"2017-12-25T00:00:00.000Z","hours":0.91}];

这是酒窝代码。看起来很简单，但我显然错过了一些东西:

var svg = dimple.newSvg("#graph", 590, 400);
var myChart = new dimple.chart(svg, coordinates);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addTimeAxis("x", "date");
x.addOrderRule("date");
var y = myChart.addTimeAxis("y", "hours");
var s = myChart.addSeries("title", dimple.plot.line);
s.interpolation = "cardinal";
myChart.draw();

Firefox 给了我一个

TypeError: a.time is undefined

Chrome 说:

Uncaught TypeError: Cannot read property 'scale' of undefined.

这就是为什么我认为这可能是格式问题。我尝试了各种时间格式但没有成功。我也尝试过几种不同类型的斧头，但它们都是在黑暗中拍摄的。我已经搜索了又搜索，但要么没有太多关于这方面的内容，要么我问了错误的问题。我很感激一些建议。

Answer 1

对 d3v4 使用 Dimple.js 版本 2.3.0。另外，您应该使用 addMeasureAxis 作为 y 轴:

var y = myChart.addMeasureAxis("y", "hours");

以及 x 轴的适当刻度格式:

var x = myChart.addTimeAxis("x", "date");
x.tickFormat = "%Y-%m-%d"
x.addOrderRule("date");

看下面的工作示例:

var coordinates = [{
  "title": "ALL the things",
  "date": "2017-11-14T00:00:00.000Z",
  "hours": 0.5
}, {
  "title": "ALL the things",
  "date": "2017-11-20T00:00:00.000Z",
  "hours": 0.5
}, {
  "title": "More",
  "date": "2017-11-27T00:00:00.000Z",
  "hours": 0.91
}, {
  "title": "More",
  "date": "2017-12-04T00:00:00.000Z",
  "hours": 0.91
}, {
  "title": "More",
  "date": "2017-12-11T00:00:00.000Z",
  "hours": 0.91
}, {
  "title": "More",
  "date": "2017-12-18T00:00:00.000Z",
  "hours": 0.91
}, {
  "title": "More",
  "date": "2017-12-25T00:00:00.000Z",
  "hours": 0.91
}];

var svg = dimple.newSvg("#graph", 590, 400);
var myChart = new dimple.chart(svg, coordinates);

myChart.setBounds(60, 30, 505, 305);

var x = myChart.addTimeAxis("x", "date");
x.tickFormat = "%Y-%m-%d";
x.addOrderRule("date");

var y = myChart.addMeasureAxis("y", "hours");
var s = myChart.addSeries("title", dimple.plot.line);
s.interpolation = "cardinal";

myChart.draw();

<div id="graph"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>