在 d3.js 中缩放数据集

Zooming datasets in d3.js

本文关键字：缩放 数据集 js d3      更新时间：2023-09-26

我在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)

})

您正在对同一组元素而不是两个不同的图层应用正确的修改，但要应用两次。要使其正常工作，请保留对其他group的引用（例如，通过使用不同的变量名称）并将转换应用于两个组。

相关文章：