javascript - d3.js 时间刻度图表，数组对象值不渲染图表，而静态值完美渲染图表

Question

从 json 文件动态创建包含 N 个对象的数组

    var taskArray = [];


 d3.json("input.json", function(error, json) {
        if (error)
            return console.warn(error);

        for ( var i = 0; i < json.length; i++) {

                //console.log(json[i][0]);
                var tasks = [];
                var version = json[i][1];
                var phase = json[i][2];
                var part = version + "(" + phase + ")";
                var name = json[i][0];


                taskArray[i]={
                    "task" : part,
                    "type" : name,
                    "startTime" : json[i][3],
                    "endTime" : json[i][4]
                };

//      console.log(taskArray);
        }

        });

JSON 文件格式:

[["abc","abc_15.0.1","Intital_phase","2016 年 7 月 26 日星期二 21:00:00","2016 年 7 月 28 日星期四 09:00:00"]]

如果我静态地给出数组值，它会起作用:

  var taskArray = [

{
    task: "abc_15.0.1 (Intital_phase) ",
    type: "abc",
    startTime: "Mon Aug 01 06:00:00 2016", //year/month/day
    endTime: "Mon Aug 01 14:00:00 2016",
},
];

var dateFormat = d3.time.format("%a %b %e %H:%M:%S %Y");

var timeScale = d3.time.scale()
        .domain([d3.min(taskArray, function(d) {return dateFormat.parse(d.startTime);}),
                 d3.max(taskArray, function(d) {return dateFormat.parse(d.endTime);})])
        .range([0,w]);

数组对象不正确吗？或者我访问对象值的方式是错误的，我无法找到它。

Answer 1

D3 日期解析器返回一个字符串，而您想要传递实际的 Date对象。考虑一下:

var timeScale = d3.time.scale()
        .domain([d3.min(taskArray, function(d) {return new Date(d.startTime);}),
                 d3.max(taskArray, function(d) {return new Date(d.endTime);})])
        .range([0,w]);

编辑:找到原因了!

您正在填写您的taskArray里面d3.json()并随后尝试使用它。这是不可能的，因为 d3.json()是异步。它立即返回并在后台完成其工作。这就是说你需要通过 d3.json()第二个参数:回调函数。当请求的 JSON 文件已加载时，将调用此函数。长话短说:将所有依赖数据的代码移至您作为回调传递的函数中。