Javascript D3-如何在单击标记时缩放地图?
我正在使用d3创建地图,以下是我的要求:Javascript D3-如何在单击标记时缩放地图?,javascript,d3.js,vue.js,maps,topojson,Javascript,D3.js,Vue.js,Maps,Topojson,我正在使用d3创建地图,以下是我的要求: 1。在地图上画标记 2单击标记,放大地图并使用新标记更新地图。 3。单击新标记时显示工具提示 到目前为止,我已经完成了步骤1和3,但我不知道如何实现步骤2 var self = this; var path; self.world = d3.select('#map') .append('svg:svg') .attr('width', self.width) .attr('h
1。在地图上画标记
2单击标记,放大地图并使用新标记更新地图。
3。单击新标记时显示工具提示 到目前为止,我已经完成了步骤1和3,但我不知道如何实现步骤2
var self = this;
var path;
self.world = d3.select('#map')
.append('svg:svg')
.attr('width', self.width)
.attr('height', self.height);
self.projection = d3.geoMercator()
.center([0, 50])
.scale(150)
.rotate([0, 0]);
path = d3.geoPath().projection(self.projection);
self.g = self.world.append('g');
//
// Uses world json file plot a actual map
//
self.g.selectAll('path')
.data(topojson.feature(worldMapJson, worldMapJson.objects.countries).features)
.enter()
.append('path')
.attr('d', path)
.on('click', function (d) {
console.log(d);
});
// Append Div for tooltip to SVG
self.div = d3.select('#map')
.append('div')
.attr('class', 'tooltip')
.style('opacity', 0);
//Adds markers
circles = self.g.selectAll('circle')
.data(self.cities)
.enter()
.append('circle')
.attr('cx', function (d) {
return self.projection([d.lon, d.lat])[0];
})
.attr('cy', function (d) {
return self.projection([d.lon, d.lat])[1];
})
.attr('r', 5)
.attr('class', 'circle')
.style('fill', 'red')
.on('mouseover', function (d) {
//Shows tooltip on mouse hover
self.div.transition()
.duration(200)
.style('opacity', 0.9);
self.div.text('Some text')
.style('left', (d3.event.pageX - 50) + 'px')
.style('top', (d3.event.pageY - 210) + 'px');
}
);