javascript - 带 D3 的 X 轴 ISO 8601 日期/时间

Question

我正在尝试构建一个以数据的日期和时间作为 x 轴的折线图。我目前已对开始日期/时间和结束日期/时间进行硬编码。我的硬编码值是我用于图表的 JSON 数据的日期和时间。我宁愿有一个动态的 x 轴。这样，如果我的数据发生变化，我不必进入并更改开始日期和结束日期。如有任何建议，我们将不胜感激。

这是我的 x 轴域:

x.domain([timeFormat.parse('2015-04-01T00:00:00'), timeFormat.parse('2015-04-02T23:50:00')])

我已经尝试过使用它，但无法让它工作:

x.domain(d3.extent(data, function (d) { return d.metricDate; })); 

这是我的代码正文，没有数据:

var vis = d3.select("#visualisation"),
            WIDTH = 2500,
            HEIGHT = 800,
            MARGINS = {
                top: 70,
                right: 800,
                bottom: 70,
                left: 100
            }

        //Defining time format
        var timeFormat = d3.time.format('%Y-%m-%dT%H:%M:%S');

        //Defining range for x. Defining range and domain for y
        var x = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right])
        var y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])
        var y1 = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])



        //Defining domain for x
        x.domain([timeFormat.parse('2015-04-01T00:00:00'), timeFormat.parse('2015-04-02T23:50:00')])
        //x.domain(d3.extent(data, function (d) { return d.metricDate; }));
        y.domain([0, d3.max(data, function (d) { return +d.ServerLogon; })]);
        y1.domain([0, d3.max(data, function (d) { return +d.Processor; })]);

        //Define x axis
        var xAxis = d3.svg.axis()
            .scale(x)
            .ticks(9)
            .orient("bottom")
            .tickFormat(d3.time.format("%m-%d% %H:%M:%S%p")); //<== insert the tickFormat function

        //Define left y axis
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

        //Define right y axis
        var yAxisRight = d3.svg.axis()
            .scale(y1)
            .orient("right");

        //Appending the axes to the svg
        vis.append("svg:g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
            .call(xAxis);

        vis.append("svg:g")
            .attr("class", "axis")
            .attr("transform", "translate(" + (MARGINS.left) + ",0)")
            .call(yAxis);

        vis.append("svg:g")
            .attr("class", "axis")
            .attr("transform", "translate(" + (WIDTH - MARGINS.right) + ",0)")
            .call(yAxisRight);

        vis.append("text")
           .attr("transform",
                 "translate(" + (WIDTH / 2) + " ," +
                     (HEIGHT + MARGINS.bottom) + ")")
           .style("text-anchor", "middle")
           .text("Date/Time");

        //Define ServerLogon line
        var lineGen = d3.svg.line()
            .x(function (d) {
                return x(timeFormat.parse(d.metricDate));
            })
            .y(function (d) {
                return y(d.ServerLogon);
            })
            .interpolate("basis");

        //Define Processor line
        var lineGen2 = d3.svg.line()
            .x(function (d) {
                return x(timeFormat.parse(d.metricDate));
            })
            .y(function (d) {
                return y1(d.Processor);
            })
            .interpolate("basis");

        //Appending the line to the svg
        vis.append('svg:path')
            .attr('d', lineGen(data))
            .attr('stroke', 'green')
            .attr('stroke-width', 2)
            .attr('fill', 'none');

        //Appending second line to the svg
        vis.append('svg:path')
            .attr('d', lineGen2(data))
            .attr('stroke', 'pink')
            .attr('stroke-width', 2)
            .attr('fill', 'none');

我有很多 JSON 数据，因此，这是第一组和最后一组数据:第一:

       {    "metricDate": "2015-04-01T00:00:00",
            "ServerLogon": "1535.000000",
            "ServerExport": "704.000000",
            "Processor": "15.268909",
            "AdminLogon": "1731.000000"
        }

最后:

{
            "metricDate": "2015-04-02T23:50:00",
            "ServerLogon": "2386.000000",
            "ServerExport": "706.500000",
            "Processor": "10.172466",
            "AdminLogon": "1919.000000"
        }

Answer 1

常见的工作流程是范围函数。将其与已有的 timeFormat 函数结合起来查找最小值和最大值:

x.domain(d3.extent(data, function(d) {
    return timeFormat.parse(d.metricDate);
}));