我有一个div标签,如下所示。
<div id="line_chart" ></div>
然后用脚本标签内的d3代码绘制图形。
var data = [{ "date": "2016.07.28", "close": 186889.45 }, { "date":
"2016.07.29", "close": 187156.54 }, { "date": "2016.08.01", "close":
187218.54 }, { "date": "2016.08.02", "close": 187624.73 }, { "date":
"2016.08.03", "close": 187198.72 }, { "date": "2016.08.05", "close":
185673.17 }, { "date": "2016.08.11", "close": 188383.55 }, { "date":
"2016.08.12", "close": 188033.59 }, { "date": "2016.08.13", "close":
187877.45 }, { "date": "2016.08.14", "close": 187877.45 }, { "date":
"2016.08.15", "close": 187935.9 }, { "date": "2016.08.16", "close":
180575.62 }, { "date": "2016.08.17", "close": 181022.03 }, { "date":
"2016.08.18", "close": 180294.82 }, { "date": "2016.08.19", "close":
194423.11 }];
margin = {
top: 20,
right: 20,
bottom: 20,
left: 100
};
var width = 960,
height = 500;
var vis = d3.select("#line_chart").append("svg")
.attr("width", width + margin.left +
margin.right)
.attr("height", height + margin.top +
margin.bottom);
var parseTime = d3.time.format("%Y.%m.%d").parse;
max_y = 0;
min_y = data[0].close;
var extent = d3.extent(data.map(function (d) { return d.date }))
max_x = extent[1];
min = extent[0];
for (i = 0; i < data.length; i++) {
max_y = Math.max(max_y, data[i].close);
min_y = Math.min(min_y, data[i].close);
}
var x = d3.time.scale()
.rangeRound([margin.left, width]);
xScale = x.domain(d3.extent(data, function (d) {
return parseTime(d.date);
}));
yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([min_y, max_y]),
xAxis = d3.svg.axis()
.scale(xScale),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
vis.append("svg:g")
.attr("class", "x axis")
.style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px' })
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px' })
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
var line = d3.svg.line()
.x(function (d) {
return xScale(parseTime(d.date));
})
.y(function (d) {
return yScale(d.close);
})
.interpolate("basis");
vis.append('svg:path')
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
var hoverLineGroup = vis.append("g")
.attr("class", "hover-line");
var hoverLine = hoverLineGroup
.append("line")
.attr("stroke", "#000")
.attr("x1", 10).attr("x2", 10)
.attr("y1", 0).attr("y2", height);
var hoverTT = hoverLineGroup.append('text')
.attr("class", "hover-tex capo")
.attr('dy', "0.35em");
var cle = hoverLineGroup.append("circle")
.attr("r", 4.5);
var hoverTT2 = hoverLineGroup.append('text')
.attr("class", "hover-text capo")
.attr('dy', "0.55em");
hoverLineGroup.style("opacity", 1e-6);
var rectHover = vis.append("rect")
.data(data)
.attr("fill", "none")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height);
vis
.on("mouseout", hoverMouseOff)
.on("mousemove", hoverMouseOn);
var bisectDate = d3.bisector(function (d) { return
parseTime(d.date); }).left;
function hoverMouseOn() {
var mouse_x = d3.mouse(this)[0];
var mouse_y = d3.mouse(this)[1];
var graph_y = yScale.invert(mouse_y);
var graph_x = xScale.invert(mouse_x);
var mouseDate = xScale.invert(mouse_x);
var i = bisectDate(data, mouseDate);
var d0 = data[i - 1]
var d1 = data[i];
var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;
hoverTT.text("Date: " + d.date);
hoverTT.attr('x', mouse_x);
hoverTT.attr('y', yScale(d.close));
hoverTT2.text("Portfolio Value: " + Math.round(d.close *
100) / 100)
.attr('x', mouse_x)
.attr('y', yScale(d.close) + 10);
cle
.attr('x', mouse_x)
.attr('y', mouse_y);
hoverLine.attr("x1", mouse_x).attr("x2", mouse_x)
hoverLineGroup.style({ 'font-weight': 'bold', 'opacity': 1
});
}
function hoverMouseOff() {
hoverLineGroup.style("opacity", 1e-6);
}
图表是根据我想要的方式绘制的。没关系。 但是当我打开javascript控制台(ctrl + shift + J)时,会出现几个错误。
Uncaught ReferenceError: radOnResponseEnd is not defined
Uncaught TypeError: Cannot read property '0' of undefined
.
.
.
我认为这些错误是由于hoverMouseOn方法造成的。 以下行是可疑的
var bisectDate = d3.bisector(function (d) { return parseTime(d.date);
}).left;
因为bisectDate用在函数hoverMouseOn()中,它使用数组“data”和bisectDate。似乎“数据”是空的,这就是为什么它说“无法读取属性”0“未定义”。
答案 0 :(得分:1)
你的问题在于:
var bisectDate = d3.bisector(function(d) {
return
parseTime(d.date);
}).left;
在JavaScript中,当您在return
...
return
foo;
...您不返回foo
。这是相同的:
return;
foo;
所以,你什么都不返回(或undefined
)。
<强>解决方案强>:
必须是:
var bisectDate = d3.bisector(function(d) {
return parseTime(d.date);
}).left;
以下是您更改的代码:
var data = [{
"date": "2016.07.28",
"close": 186889.45
}, {
"date": "2016.07.29",
"close": 187156.54
}, {
"date": "2016.08.01",
"close": 187218.54
}, {
"date": "2016.08.02",
"close": 187624.73
}, {
"date": "2016.08.03",
"close": 187198.72
}, {
"date": "2016.08.05",
"close": 185673.17
}, {
"date": "2016.08.11",
"close": 188383.55
}, {
"date": "2016.08.12",
"close": 188033.59
}, {
"date": "2016.08.13",
"close": 187877.45
}, {
"date": "2016.08.14",
"close": 187877.45
}, {
"date": "2016.08.15",
"close": 187935.9
}, {
"date": "2016.08.16",
"close": 180575.62
}, {
"date": "2016.08.17",
"close": 181022.03
}, {
"date": "2016.08.18",
"close": 180294.82
}, {
"date": "2016.08.19",
"close": 194423.11
}];
margin = {
top: 20,
right: 20,
bottom: 20,
left: 100
};
var width = 960,
height = 500;
var vis = d3.select("body").append("svg")
.attr("width", width + margin.left +
margin.right)
.attr("height", height + margin.top +
margin.bottom);
var parseTime = d3.time.format("%Y.%m.%d").parse;
max_y = 0;
min_y = data[0].close;
var extent = d3.extent(data.map(function(d) {
return d.date
}))
max_x = extent[1];
min = extent[0];
for (i = 0; i < data.length; i++) {
max_y = Math.max(max_y, data[i].close);
min_y = Math.min(min_y, data[i].close);
}
var x = d3.time.scale()
.rangeRound([margin.left, width]);
xScale = x.domain(d3.extent(data, function(d) {
return parseTime(d.date);
}));
yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([min_y, max_y]),
xAxis = d3.svg.axis()
.scale(xScale),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
vis.append("svg:g")
.attr("class", "x axis")
.style({
'stroke': 'Black',
'fill': 'none',
'stroke-width': '1px'
})
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.style({
'stroke': 'Black',
'fill': 'none',
'stroke-width': '1px'
})
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
var line = d3.svg.line()
.x(function(d) {
return xScale(parseTime(d.date));
})
.y(function(d) {
return yScale(d.close);
})
.interpolate("basis");
vis.append('svg:path')
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
var hoverLineGroup = vis.append("g")
.attr("class", "hover-line");
var hoverLine = hoverLineGroup
.append("line")
.attr("stroke", "#000")
.attr("x1", 10).attr("x2", 10)
.attr("y1", 0).attr("y2", height);
var hoverTT = hoverLineGroup.append('text')
.attr("class", "hover-tex capo")
.attr('dy', "0.35em");
var cle = hoverLineGroup.append("circle")
.attr("r", 4.5);
var hoverTT2 = hoverLineGroup.append('text')
.attr("class", "hover-text capo")
.attr('dy', "0.55em");
hoverLineGroup.style("opacity", 1e-6);
var rectHover = vis.append("rect")
.data(data)
.attr("fill", "none")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height);
vis
.on("mouseout", hoverMouseOff)
.on("mousemove", hoverMouseOn);
var bisectDate = d3.bisector(function(d) {
return parseTime(d.date);
}).left;
function hoverMouseOn() {
var mouse_x = d3.mouse(this)[0];
var mouse_y = d3.mouse(this)[1];
var graph_y = yScale.invert(mouse_y);
var graph_x = xScale.invert(mouse_x);
var mouseDate = xScale.invert(mouse_x);
var i = bisectDate(data, mouseDate);
var d0 = data[i - 1] ? data[i - 1] : 0;
var d1 = data[i] ? data[i] : 0;
var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;
hoverTT.text("Date: " + d.date);
hoverTT.attr('x', mouse_x);
hoverTT.attr('y', yScale(d.close));
hoverTT2.text("Portfolio Value: " + Math.round(d.close *
100) / 100)
.attr('x', mouse_x)
.attr('y', yScale(d.close) + 10);
cle
.attr('cx', mouse_x)
.attr('cy', mouse_y);
hoverLine.attr("x1", mouse_x).attr("x2", mouse_x)
hoverLineGroup.style({
'font-weight': 'bold',
'opacity': 1
});
}
function hoverMouseOff() {
hoverLineGroup.style("opacity", 1e-6);
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
&#13;
PS :请注意var d0 = data[i - 1];
和var d1 = data[i];
。它们将undefined
位于图表的边缘。