我有工作lineWithFocusChart
,我需要将其复制到另一页。
现在,当我运行它时,我在Firebug的控制台中看到了这条消息:
TypeError:d未定义 scatter.js(第240行)
if(d.data.length === 0)
在使用Firebug的调试功能进行一些试验和错误后,我还没有找到解决方案,所以我会给你我的代码,看看是否有我的问题。我失踪了。
HTML页面:
<div id="grafico2" class="graficoContent" style="border: 1px solid blue; opacity:0">
<link href="charts/line/line.css" rel="stylesheet" type="text/css">
<script src="charts/line/libs/nv.d3.js"></script>
<script src="charts/line/libs/tooltip.js"></script>
<script src="charts/line/libs/utils.js"></script>
<script src="charts/line/libs/models/legend.js"></script>
<script src="charts/line/libs/models/axis.js"></script>
<script src="charts/line/libs/models/scatter.js"></script>
<script src="charts/line/libs/models/line.js"></script>
<script src="charts/line/libs/models/lineWithFocusChart.js"></script>
<script src="charts/line/line.js"></script>
<div id="line" class='with-3d-shadow with-transitions'>
<svg style="height: 700px;"></svg>
</div>
<script type="text/javascript">
var lineChart = new Line();
lineChart.draw();
</script>
</div>
line.js:
function Line() {
var chart = {};
var lineChart = nv.models.lineWithFocusChart()
.x(function(d){
return new Date(d.x);
});
var dateParser = d3.time.format("%Y-%m-%d").parse;
function getArtworkFromKey(key){
return testData().filter(function(el){ return el.key == key; })[0].artwork;
}
chart.draw = function(){
var data = testData();
nv.addGraph(function(){
lineChart.margin({bottom: 40, left:50});
var maxStreams = d3.extent(data, function(d,i){
return d.values[i].y;
})[1];
lineChart.yDomain([0, maxStreams*(6/5)]);
lineChart.lines.xScale(d3.time.scale());
lineChart.xAxis.tickFormat(function(d) {
return d3.time.format("%d-%m-%Y")(new Date(d));
})
.tickValues(function(d,i){
var tmp = d[i].values.map(function(el){ return el.x;});
var res = [];
res.concat.apply(res, tmp);
return res;
});
lineChart.lines2.xScale(d3.time.scale());
lineChart.x2Axis.tickFormat(function(d) {
return d3.time.format("%d-%m-%Y")(new Date(d));
})
.tickValues(function(d,i){
var tmp = d[i].values.map(function(el){ return el.x;});
var res = [];
res.concat.apply(res, tmp);
return res;
});
lineChart.yAxis.tickFormat(d3.format(".2s"));
lineChart.y2Axis.tickFormat(d3.format(".2s"));
lineChart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format("%d-%m-%Y")(new Date(graph.point.x));
var y = String(graph.point.y);
var y = String(graph.point.y) + ' streams';
tooltip_str = '<center><image src="' + getArtworkFromKey(key) + '"/><br/><b>'+key+'</b></br>' + y + ' il ' + x + '</center>';
return tooltip_str;
});
d3.select('#line svg')
.datum(data)
.call(lineChart);
d3.selectAll('.nv-x.nv-axis > g').attr('transform', 'translate(0,10)');
return lineChart;
});
};
return chart;
}
我使用testData()
函数返回此 JSON 对象
function testData() {
return [
{
key: "Clean Bandit - Rather Be",
values: [
{
x: "2014-04-27",
y: 2504054
},
{
x: "2014-04-20",
y: 1905117
},
{
x: "2014-04-13",
y: 1513407
},
{
x: "2014-04-06",
y: 893984
}
],
artwork: "http://o.scdn.co/300/f6c9e55802a1dbf3c4a346dd58097ad0cafe9a94"
},
{
key: "Calvin Harris - Summer",
values: [
{
x: "2014-04-27",
y: 1504054
},
{
x: "2014-04-20",
y: 805117
},
{
x: "2014-04-13",
y: 713407
},
{
x: "2014-04-06",
y: 593984
}
],
artwork: "http://o.scdn.co/300/f6c9e55802a1dbf3c4a346dd58097ad0cafe9a94"
},
{
key: "David Guetta - Bad",
values: [
{
x: "2014-04-27",
y: 1504054
},
{
x: "2014-04-20",
y: 505117
},
{
x: "2014-04-13",
y: 213407
},
{
x: "2014-04-06",
y: 93984
}
],
artwork: "http://o.scdn.co/300/f6c9e55802a1dbf3c4a346dd58097ad0cafe9a94"
},
{
key: "Iggy Azalea - Fancy",
values: [
{
x: "2014-04-27",
y: 2504054
},
{
x: "2014-04-20",
y: 1405117
},
{
x: "2014-04-13",
y: 513407
},
{
x: "2014-04-06",
y: 293984
}
],
artwork: "http://o.scdn.co/300/d71d05ded1704bcf849465dd5e76e196847d1c0a"
}
];
}
你知道为什么会失败吗?