[英]Transfer d3 v3 to v4 (projection)
我如何将这段代码从v3传输到v4。此代码的主要目标是在Google Maps上添加一层路径,并将这两个投影结合在一起。 我之前在v3中有代码,现在可以正常工作。现在我需要将其升级到V4。
d3.json("Export_Output_6_modified.json", function(error, jordanLevel2) {
if (error) throw error
//console.log(data[0].comuni[0].geometry.coordinates);
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div");//.attr("height",1000)
overlay.draw = function() {
layer.select('svg').remove();
var w = 900;
var h = 900;
var color = ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999'];
var heat_color = d3.scaleLinear().domain([0, 1]).range(['#b2df8a', '#ff7f00']).interpolate(d3.interpolateHcl);
var overlayProjection = this.getProjection();
console.log(overlayProjection);
// Turn the overlay projection into a d3 projection
var googleMapProjection = d3.geoProjection(function(coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);console.log(googleCoordinates);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);console.log(pixelCoordinates );
return [pixelCoordinates.x, pixelCoordinates.y];
});
var path = d3.geoPath(googleMapProjection);
var svg = layer.append("svg")
.attr('width', w)
.attr('height', h)
var g = svg.append('g')
.attr("id", "mapGroup");
g.selectAll("path")
.data(jordanLevel2.features)
.enter()
.append("path")
.attr("d", googleMapProjection)
.attr('class', 'state selected')
.style("fill", function(d, i) {
return color[i % color.length];
})
.style('opacity', .7);
}
}
overlay.setMap(map);
});
我试图将geo.path更改为geoPath,也将大多数代码转移到v4,但仍然给我一个错误提示吗?
d3.js-v4中不再支持将函数传递给path.projection 。 您需要使用d3.geoProjection进行构建。
就像是,
var googleMapProjection = d3.geoProjection(function(radLon, radLat) {
// Convert radians to degrees first.
var googleCoordinates = new google.maps.LatLng(radLon * 180/Math.PI, radLat * 180/Math.PI);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x, pixelCoordinates.y];
});
var path = d3.geoPath(googleMapProjection);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.