Question

我正在为拥有节点和链接的美国地图提供缩放功能。我使用以下链接来创建缩放功能 https://bl.ocks.org/mbostock/2206340

但该链接中的代码仅适用于V3。我试图在V4中找出相同的功能，但无法实现它。下面是我用来缩放美国地图的代码，该地图有节点和链接。

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

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]; });
}

我用谷歌搜索了然后我找到了一个负责V4的链接 https://bl.ocks.org/iamkevinv/0a24e9126cd2fa6b283c6f2d774b69a2

但是当我使用此链接中的逻辑时，我无法获得所需的结果。有人可以帮我解决这个问题吗？

适用于美国地图的d3版本4中的缩放功能

0 个答案: