D3 变焦 v3 与 v5

Question

我无法将具有缩放行为的 D3 示例从 v3 转换为 v5。我的代码基于此示例：https : //bl.ocks.org/mbostock/2206340 by Mike Bostock。我使用 react 并收到这些错误“d3.zoom(...).translate is not a function”和“d3.zoom(...).scale is not a function”。我查看了文档，但找不到比例或仅翻译 scaleBy 和 translateTo 和 translateBy。我无法弄清楚如何做到这一点。

componentDidMount() {
    this.drawChart();
}

drawChart = () => {
    var width = window.innerWidth * 0.66,
        height = window.innerHeight * 0.7,
        centered,
        world_id;

    window.addEventListener("resize", function() {
        width = window.innerWidth * 0.66;
        height = window.innerHeight * 0.7;
    });

    var tooltip = d3
        .select("#container")
        .append("div")
        .attr("class", "tooltip hidden");

    var projection = d3
        .geoMercator()
        .scale(100)
        .translate([width / 2, height / 1.5]);

    var path = d3.geoPath().projection(projection);

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

    var svg = d3
        .select("#container")
        .append("svg")
        .attr("width", width)
        .attr("class", "map card shadow")
        .attr("height", height);

    var g = svg.append("g").call(zoom);

    g.append("rect")
        .attr("class", "background")
        .attr("width", width)
        .attr("height", height);

    var world_id = data2;
    var world = data;
    console.log(world);

    var rawCountries = topojson.feature(world, world.objects.countries)
            .features,
        neighbors = topojson.neighbors(world.objects.countries.geometries);

    console.log(rawCountries);
    console.log(neighbors);
    var countries = [];

    // Splice(remove) random pieces
    rawCountries.splice(145, 1);
    rawCountries.splice(38, 1);

    rawCountries.map(country => {
        //console.log(parseInt(country.id) !== 010)
        // Filter out Antartica and Kosovo
        if (parseInt(country.id) !== parseInt("010")) {
            countries.push(country);
        } else {
            console.log(country.id);
        }
    });

    console.log(countries);

    g.append("g")
        .attr("id", "countries")
        .selectAll(".country")
        .data(countries)
        .enter()
        .insert("path", ".graticule")
        .attr("class", "country")
        .attr("d", path)
        .attr("data-name", function(d) {
            return d.id;
        })
        .on("click", clicked)
        .on("mousemove", function(d, i) {
            var mouse = d3.mouse(svg.node()).map(function(d) {
                return parseInt(d);
            });

            tooltip
                .classed("hidden", false)
                .attr(
                    "style",
                    "left:" + mouse[0] + "px;top:" + (mouse[1] - 50) + "px"
                )
                .html(getCountryName(d.id));
        })
        .on("mouseout", function(d, i) {
            tooltip.classed("hidden", true);
        });

    function getCountryName(id) {
        var country = world_id.filter(
            country => parseInt(country.iso_n3) == parseInt(id)
        );
        console.log(country[0].name);
        console.log(id);
        return country[0].name;
    }

    function updateCountry(d) {
        console.log(world_id);

        var country = world_id.filter(
            country => parseInt(country.iso_n3) == parseInt(d.id)
        );
        console.log(country[0].name);
        var iso_a2;
        if (country[0].name === "Kosovo") {
            iso_a2 = "xk";
        } else {
            iso_a2 = country[0].iso_a2.toLowerCase();
        }

        // Remove any current data
        $("#countryName").empty();
        $("#countryFlag").empty();

        $("#countryName").text(country[0].name);

        var src = "svg/" + iso_a2 + ".svg";
        var img = "<img id='flag' class='flag' src=" + src + " />";
        $("#countryFlag").append(img);
    }

    // Remove country when deselected
    function removeCountry() {
        $("#countryName").empty();
        $("#countryFlag").empty();
    }

    // When clicked on a country
    function clicked(d) {
        if (d && centered !== d) {
            centered = d;

            updateCountry(d);
        } else {
            centered = null;
            removeCountry();
        }

        g.selectAll("path").classed(
            "active",
            centered &&
                function(d) {
                    return d === centered;
                }
        );

        console.log("Clicked");
        console.log(d);
        console.log(d);

        var centroid = path.centroid(d),
            translate = projection.translate();

        console.log(translate);
        console.log(centroid);

        projection.translate([
            translate[0] - centroid[0] + width / 2,
            translate[1] - centroid[1] + height / 2
        ]);

        zoom.translate(projection.translate());

        g.selectAll("path")
            .transition()
            .duration(700)
            .attr("d", path);
    }

    // D3 zoomed
    function zoomed() {
        console.log("zoomed");
        projection.translate(d3.event.translate).scale(d3.event.scale);
        g.selectAll("path").attr("d", path);
    }
};

render() {
    return (
        <div className="container-fluid bg">
            <div class="row">
                <div className="col-12">
                    <h2 className="header text-center p-3 mb-5">
                        Project 2 - World value survey
                    </h2>
                </div>
            </div>
            <div className="row mx-auto">
                <div className="col-md-8">
                    <div id="container" class="mx-auto" />
                </div>
                <div className="col-md-4">
                    <div id="countryInfo" className="card">
                        <h2 id="countryName" className="p-3 text-center" />
                        <div id="countryFlag" className="mx-auto" />
                    </div>
                </div>
            </div>
        </div>
    );
}

Answer 1

我不会讨论 v3 和 v5 之间的差异，部分原因是时间已经足够长，我已经忘记了 v3 有何不同的很多细节和细节。相反，我将只看看如何使用 v5 来实现该示例。这个答案需要适应非地理情况——在这种情况下，地理投影正在进行视觉缩放。

在您的示例中，缩放会跟踪缩放状态，以便正确设置投影。缩放不会设置对任何 SVG 元素的变换，而是投影会在每次缩放（或单击）时重新投影要素。

因此，首先，使用 d3v5，在我们对所选内容调用缩放之后，我们可以使用以下命令设置所选元素的缩放：

selection.call(zoom.transform, transformObject);

其中基础变换对象是：

d3.zoomIdentity 

d3.zoomIdentity 的标度 (k) 为 1，平移 x (x) 和 y (y) 值为 0。恒等原型中内置了一些方法，因此普通对象不行，但我们可以使用恒等为 k、x 和 y 设置新值：

var transform = d3.zoomIdentity;
transform.x = projection.translate()[0]
transform.y = projection.translate()[1]
transform.k = projection.scale()

这与示例非常相似，但我们不是向缩放行为本身提供值，而是构建一个描述缩放状态的对象。现在我们可以用来selection.call(zoom.transform, transform)应用变换。这会：

• 将缩放变换设置为提供的值
• 触发缩放事件

在我们的缩放函数中，我们想要采用更新的缩放变换，将其应用于投影，然后重新绘制我们的路径：

function zoomed() {
  // Get the new zoom transform
  transform = d3.event.transform;
  // Apply the new transform to the projection
  projection.translate([transform.x,transform.y]).scale(transform.k);
  // Redraw the features based on the updaed projection:
  g.selectAll("path").attr("d", path);
}

注意 -d3.event.translate并且d3.event.scale不会在 d3v5 中返回任何内容 - 这些现在是 x,y,k 属性d3.event.transform

如果没有点击功能，我们可能会有this，它直接改编自问题中的示例。不包括单击功能，但您仍然可以平移。

如果我们想像原来一样包含点击中心功能，我们可以使用新的平移更新变换对象并调用缩放：

function clicked(d) {
  var centroid = path.centroid(d),
      translate = projection.translate();
  // Update the translate as before:
  projection.translate([
    translate[0] - centroid[0] + width / 2,
    translate[1] - centroid[1] + height / 2
  ]);
  // Update the transform object:
  transform.x = projection.translate()[0];
  transform.y = projection.translate()[1];
  // Apply the transform object:
  g.call(zoom.transform, transform);

}

与 v3 版本类似 - 但通过应用缩放变换（就像我们最初所做的那样），我们触发了缩放事件，因此我们不需要更新路径作为点击功能的一部分。

总而言之，可能看起来像这样。

有一个细节我没有包括在内，即单击时的转换。当我们在单击和缩放上触发缩放功能时，如果我们包含过渡，平移也会过渡 - 并且平移会触发太多缩放事件，导致过渡无法按预期执行。我们的一个选择是仅当源事件是点击时才触发转换。此修改可能如下所示：

function zoomed() {
  // Was the event a click?
  var event = d3.event.sourceEvent ? d3.event.sourceEvent.type : null;
  // Get the new zoom transform
  transform = d3.event.transform;
  // Apply the new transform to the projection
  projection.translate([transform.x,transform.y]).scale(transform.k);
  // Redraw the features based on the updaed projection:
  (event == "click") ? g.selectAll("path").transition().attr("d",path) : g.selectAll("path").attr("d", path);
}