использование simpleheat.js для геокарты с D3 - PullRequest
Новая
       19

использование simpleheat.js для геокарты с D3

0 голосов
/ 13 сентября 2018

Попытка наложить географическую карту, используя simpleheat.js и D3. Работа над примером (https://bl.ocks.org/patricksurry/803a131d4c34fde54b9fbb074341daa5). Я успешно рисую карту, но не точки, как карту тепла. Нет ошибки в console.log. Я получаю один шарик цвета радуги (я перебрал радиус) в левом верхнем углу рядом с картой. Не смог найти много примеров и документации по простой игре мало. Был бы признателен за любое понимание этого. Спасибо. 

<!DOCTYPE html>
<html>
<head>
    <style>
        #container svg, #container canvas {
    position: absolute;
    top: 0;
}
    </style>
    <meta charset="utf-8">
    <title>D3 Map Example</title>
</head>
<body>
<div id= "container">

</div>


<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src = "node_modules/simpleheat/simpleheat.js"></script>

<script>
 //Width and height
	var w = 960;
	var h = 600;
div = d3.select("#container")
mapLayer = div.append('svg')
        .attr("id","map")
        .attr("width",w)
        .attr("height",h)

canvasLayer = div.append('canvas').attr('id', 'heatmap').attr('width', w).attr('height', h);

var canvas = canvasLayer.node(),
    context = canvas.getContext("2d");


	//Define map projection
var projection = d3.geoMercator()
		   .center([ -120, 37 ])
		   .translate([ w/2, h/2 ])
		   .scale([ 2600 ]);

			//Define path generator
var path = d3.geoPath()
			 .projection(projection)
var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
// read data in
d3.queue()
.defer(d3.json,"ca.json")
.defer(d3.csv, "heatCAN.csv")
.await(main)

function main (err, ca, heatCAN) {
    console.log(heatCAN)
    mapLayer
        .append('svg')
        
        .selectAll("path")
        .data(ca.features)
        .enter()
        .append("path")
        .attr("d",path)
        .attr("stroke","#000000")
        .attr("fill","#ffffff")
     //add heatmap   
    simpleheat(canvas).data(heatCAN.map(x=>[x.LON,x.LAT,x.cMort_90d])).radius(100,100).draw(0.05);

    
}


</script>
</body>
</html>
...