如何使用 D3 在地图上实现实时画圈的效果

标签： D3，map, particle

使用 D3 绘制地图后，空白着的地图没什么吸引力，假设我们绘制了张中国地图，我们将销售中心标示在地图上，然后销售中心每卖出一件商品，就在该销售中心所对应的地图绘制弹出一个圆圈，该圆圈缓慢放大，然后在2秒内淡出。代码应该如何实现呢?

首先，当卖出一件商品时，获取该销售中心的经纬度，然后调用以下函数：

particle([lat, lng]);

该函数的具体定义如下：

var chinaMap = svg.append('g')  .attr("id","chinaMap");function particle(point) {    var m = projection(point);    if(m[0] && m[1]) {        chinaMap.insert("circle")           .attr("cx", m[0])          .attr("cy", m[1])          .attr("r", 1e-6)          .style("stroke-width", '0.04em')          //.style("stroke", d3.hsl((i = (i + 20) % 360), 1, .5))          .style("stroke", '#31a354')          .style("stroke-opacity", 1)          .transition()          .duration(2000)          .ease(Math.sqrt)          .attr("r", 50)          .style("fill","none")          .style("stroke-width", '0.1em')          .style("stroke-opacity", 1e-6)          .remove();    }}

projection 函数的定义：

var width = $("#main").width(),    height = $("#main").height();var projection = d3.geo.mercator()    .center([105,33.5])    .scale(width*0.6)    .translate([width/2,height/2]);