[英]heatmap.js - plotting multiple data points from .csv
我正在尝试使用heatmap.js绘制x1,y1坐标,我使用d3.csv()方法从.csv文件中读取值。 我尝试使用https://www.patrick-wied.at/static/heatmapjs/中的示例,仅绘制了一个点,但是.csv文件中有七个点。 下面是代码。
enter code here
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="heatmap.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function point()
{
alert("alert");
var points = [];
var heatmap = h337.create({
container: domElement
});
d3.csv("files/trial5.csv", function(error,data) {
data.forEach(function(d) {
d.x1 = +d.x1;
d.y1 = +d.y1;
console.log("data : " +data + " " + error);
heatmap.setData({
max: 5,
data:[{ x: d.x1, y: d.y1, value: 5}]
});
console.log("x:" + d.x1, "y:" + d.y1);
})
});
}
</script>
</head>
<body>
<div id="domElement" style="width: 1000px; height: 1000px; border: solid;"></div>
<input type="button" value="Click" id="clickButton" onclick="point()"/>
</body>
</html>
将heatmap.setData
移到forEach
之外:
data.forEach(function(d) {
d.x1 = +d.x1;
d.y1 = +d.y1;
});
heatmap.setData({
max: maxValue,//your max here
min: minValue,//your min here
data: data//your data array
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.