heatmap.js - построение нескольких точек данных из.csv

Я пытаюсь построить координаты x1,y1, используя heatmap.js, я читаю значения из файла.csv, используя метод d3.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>
Источник

1 ответ

Переехать 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
});
Источник
Другие вопросы по тегам