我正在尝试使用 nvd3/d3 绘制一个简单的折线图。在“鼠标悬停”期间发生在数据点上的转换不可见。如何解决这个问题?
添加以下代码:
Date.prototype.addHours = function(h) {
this.setHours(this.getHours() + h);
return this;
};
function getData(transport) {
var arr = [];
for (var i = 0; i < transport.length; i++) {
arr.push({
x : new Date(transport[i].timePeriod).addHours(7),
y : transport[i].number
});
}
return arr;
}
function cumulativeTestData(transport) {
return [{
key : "Active Customers",
values : getData(transport),
color : "#ff7f0e"
}];
}
nv.addGraph(function() {
var chart;
chart = nv.models.lineChart().x(function(d) {
return d.x;
}).y(function(d) {
return d.y;
});
chart.xAxis.tickFormat(function(d) {
return d3.time.format("%d-%m-%y")(new Date(d));
});
chart.yAxis.tickFormat(d3.format(',g'));
d3.select('#chart1 svg').datum(cumulativeTestData(transport))
// .transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
$(function() {
$("#day").click(function() {
var from = $("#from").val();
var to = $("#to").val();
$.ajax({
url : "http://api.local/api/GraphData?startDate=" + from + "&endDate=" + to,
type : 'GET',
contentType : "application/javascript",
crossDomain : true,
dataType : "jsonp",
cache : false,
async : false,
success : function(transport) {
// nv.addGraph(drawGraph(transport));
drawGraph(transport);
},
error : function() {
alert("failed in calling status");
}
});
});
});
如果我单独运行此代码,我可以看到数据点,但由于我必须将此图表与许多其他控件一起包含,数据点似乎不起作用。
还想补充一点,当我点击折线图上的特定数据点时,我在 fire bug 的控制台中看到了这个错误
错误:属性 cx="NaN" 的值无效