D3 - 如何在点击标记时缩放地图？

Question

我使用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('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');

          }
         );