x轴上的日期重复

时间:2014-02-10 01:03:43

标签: javascript php graph d3.js nvd3.js

我创建了附加功能以消除间隙并停止插值:

public static function fixDates($data) {
    $values = $data['values'];
    $fixed = [
        $values[0]
    ];

    $t1 = new \DateTime();
    $t2 = new \DateTime();

    for ($i = 1, $len = count($values); $i < $len; $i++) {
        $t1->setTimestamp(($values[$i-1]['x']/1000) + 86400);
        $t2->setTimestamp($values[$i]['x']/1000);

        $interval = new \DateInterval('P1D');
        $daterange = new \DatePeriod($t1, $interval, $t2);

        foreach ($daterange as $date) {
            $fixed[] = ['x' => $date->getTimestamp() * 1000, 'y' => 0];
        }

        $fixed[] = [
            'x' => $t2->getTimestamp()*1000,
            'y' => $values[$i]['y']
        ];
    }

    $data['values'] = $fixed;
    return $data;
}

它产生一个输出数组(包含在nvd3代码中),如下所示:

        nv.addGraph(function () {
            var chart = nv.models.lineChart();
            chart.yAxis.axisLabelDistance(35);

            chart.xAxis
                .axisLabel('Time')
                .tickFormat(function (d) {
                    return d3.time.format('%d %b')(new Date(d));
                });

            chart.yAxis.axisLabelDistance(35);

            chart.yAxis
                .axisLabel('# of devices')
                .tickFormat(d3.format('d'));

            d3.select('#number_of_devices svg')
                .datum([{
                    "key": "Applications",
                    "values": [{
                        "x": 1391155200000,
                        "y": 5
                    }, {
                        "x": 1391241600000,
                        "y": 0
                    }, {
                        "x": 1391328000000,
                        "y": 0
                    }, {
                        "x": 1391414400000,
                        "y": 6
                    }, {
                        "x": 1391500800000,
                        "y": 0
                    }, {
                        "x": 1391587200000,
                        "y": 0
                    }, {
                        "x": 1391673600000,
                        "y": 0
                    }, {
                        "x": 1391760000000,
                        "y": 0
                    }, {
                        "x": 1391846400000,
                        "y": 31
                    }, {
                        "x": 1391932800000,
                        "y": 8
                    }]
                }])
                .transition()
                .duration(500)
                .call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
        });

这很有效,但是,我在x轴上显示重复的天数,如下图所示:http://shutter.io/img/lvith8/raw

我缺少什么想法?

修改

它与此数据集无关,只是因为它是一个较大的图形宽度和较少的数据点。如果我减小图形的宽度并强制它更新它自己修复,但我仍然希望它能以任何宽度按预期工作。

我认为我的tickFormatter(return d3.time.format('%d %b')(new Date(d));)可以弥补这一点。

0 个答案:

没有答案