我创建了附加功能以消除间隙并停止插值:
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));
)可以弥补这一点。