时间戳

首页 > 解决方案 > 如何在 D3v6 中使地图可拖动

javascript - 如何在 D3v6 中使地图可拖动

问题描述

我有一张钻取世界地图（大陆地图+国家地图），其中第二张地图（国家地图）通过使用fitExtent函数放大加载。由于它是放大的，我想实现一个可拖动的功能，我可以拖动地图并查看地图的其他部分。

//My svg tag
<svg id="mapSVG" width="560"; height="350"></svg>

let zoomControl = function (event) {
    svg.selectAll("path")
        .attr("transform", event.transform);
}

function loadCountryMap(path, mapData) {
    d3.json(path).then(function (json) {
        var projection = d3.geoMercator();
        var features = json.features;

        //The reason why we have to do this is because d3.js has winding problem
        //We need to rewind for the map to display correctly
        var fixed = features.map(function (feature) {
            return turf.rewind(feature, { reverse: true });
        })
        //Projections
        var geoPath = d3.geoPath().projection(projection);

        //Zoom in
        projection.fitExtent([[mapData.XOffSet, mapData.YOffSet], [width*2, height*2]], { "type": "FeatureCollection", "features": fixed })

        //Draggable
        svg.selectAll("path")
            .data(fixed)
            .enter()
            .append("path")
            .attr("d", geoPath)
            .attr("id", function (d) { return d.properties.FIPS_10_; })
            .style("fill", "steelblue")
            .style("stroke", "transparent")
            .on("mouseover", mouseOver)
            .on("mouseleave", mouseLeave)
            .on("click", mouthClick)
            .call(d3.zoom()
                .on("zoom", zoomControl)
                .scaleExtent([1, 1])
            )
    })
}

//How I select the svg
var svg = d3.select("svg")
    .style("background-color", "white")
    .style("border", "solid 1px black");
var width = +svg.attr("width");
var height = +svg.attr("height");

这有两个问题：

1：通过选择“svg”标签，这将拖动整个SVG HTML元素，而不是SVG的地图内容。我也把它改成了“path”和“d”，也没有用。

2：第一次发生拖动事件时，被拖动的元素被放置在鼠标光标的右下角，然后跟随鼠标光标。

我希望放大的地图可以拖动到地图的其他部分。

示例所需的行为bin。这是Andrew Reid 对问题的回答中的代码。放大地图后，它变成了可拖动的。我没有看到代码中任何地方都定义了拖动行为。我假设它是通过使用来实现的d3.zoom()。但是，由于我的地图默认放大（onload），并且我有一个单独的鼠标单击事件，我认为我不能使用类似的方法。

标签： javascriptd3.jszoomingdraggable

解决方案

var svg = d3.select("#mapDiv")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("background-color", "white")
    .style("border", "solid 1px black")
    .call(d3.zoom()
        .on("zoom", function (event) {
            svg.attr("transform", event.transform)
        })
        .scaleExtent([1, 1])
    )
    .append("g");

我通过将路径与.append("g"). 我没有按路径分配缩放功能路径，而是将其分配给整个 SVG，现在地图工作正常。

推荐阅读