Javascript 在d3.js中缩放数据集

我在d3.js中叠加了两个数据集，一个边界图和一个点图。我希望能够同时缩放两个数据集。对于当前代码，只有点贴图响应缩放。如何同时缩放两个数据集

代码如下所示

var canvas = d3.select("body").append("svg")
    .attr("width",260)
    .attr("height",400)

d3.json("/Maps/iowastate.json",function (data){
    var group = canvas.selectAll("g")
        .data(data.features)
        .enter()
        .append("g")
    var projection =d3.geo.mercator()
    .scale(250)
    //.translate([0,0]);
    var path = d3.geo.path().projection(projection);
    var areas = group.append("path")
        .attr("d", path)
        .attr("class","area")
        .attr("fill","black");




d3.csv("/Maps/detectors.csv",function (d){
    var group = canvas.selectAll("g")
        .data(d)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            return projection([d.StartLong,d.StartLat])[0];
       })
       .attr("cy", function(d,i) {
               return projection([d.StartLong,d.StartLat])[1];
       })
       .attr("r", 0.1)
       .style("fill", "red");
    //console.log(projection(d[0].StartLat))
    var zoom = d3.behavior.zoom()
        .on("zoom",function(){
        group.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        group.selectAll("path")  
        .attr("d", path.projection(projection));
        });
    canvas.call(zoom)
    })
    var zoom = d3.behavior.zoom()
        .on("zoom",function(){
        group.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        group.selectAll("path")  
        .attr("d", path.projection(projection));
        });
    canvas.call(zoom)


})

---

您正在应用正确的修改，但对同一组元素应用了两次，而不是对两个不同的层应用了两次。要使其工作，请保留对另一个

组的引用（例如，通过使用不同的变量名），并将转换应用于两个组。
将您在缩放处理程序函数中所做的修改应用于两个层。Lars，您能更具体一点吗？我教过调用每个层的缩放应该解决这个问题。有什么我做错了吗？你没有这样做，你调用了两次确切的代码（这与调用一次的效果相同）。您需要保留对两个
组
变量的引用，并将转换应用于这两个变量。ooooooo。。。伟大的成功了！