D3 V4中网络地图的缩放问题

Question

我在Map中有缩放功能的问题。 放大整个SVG元素但不是气泡和线条。

使用以下代码解决但工作不正常，我在做错误的地方？

var svg = d3.select(this.domNode).append("svg")
      .attr("width",width + margin.left + margin.right)
      .attr("height",height + margin.top + margin.bottom)
      .call(d3.zoom().on("zoom", function () {
   svg.attr("transform", d3.event.transform);
}))
.append("g")
      .attr("transform", "translate("+margin.left +"," +margin.top+")")
      .on("click", function(d) {
        if (event.target.classList.contains('nodes')) {
            me.clearSelections();
            me.endSelections();
            return true;
        } else {
            return true;
        }
     })
;

现在尝试使用以下内容：

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([height, 8 * height])
    .on("zoom", zoomed); 

var svg = d3.select(this.domNode).append("svg")
      .attr("width",width + margin.left + margin.right)
      .attr("height",height + margin.top + margin.bottom)
      .call(zoom)
.append("g")
      .attr("transform", "translate("+margin.left +"," +margin.top+")")

;

function zoomed() {
  projection.translate(d3.event.translate).scale(d3.event.scale);
  g.selectAll("path").attr("d", path);
  g.selectAll(".place-label").attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
  .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
   ;


  g.selectAll("circle").attr("cx", function(d) {
                   return projection([d.longitude, d.latitude])[0];
           })
           .attr("cy", function(d) {
                   return projection([d.longitude, d.latitude])[1];
           });
  g.selectAll("line")
        .attr("distance", 10)

//        .attr("x1", function(d) { return d.source.x; })
//        .attr("y1", function(d) { return d.source.y; })
        .attr('x1', function(d) { return projection([d.Slongitude, d.Slatitude])[0]; })
        .attr('y1', function(d) { return projection([d.Slongitude, d.Slatitude])[1]; })
        .attr('x2', function(d) { return projection([d.Tlongitude, d.Tlatitude])[0]; })
        .attr('y2', function(d) { return projection([d.Tlongitude, d.Tlatitude])[1]; })
        ;


}

您可以查看video，确切的问题是什么。