D3 zoom v3 vs v5

问题描述 投票：2回答：1

我在使用从v3到v5的缩放行为转换D3示例时遇到问题。我的代码基于这个例子：Mike Bostock的https://bl.ocks.org/mbostock/2206340。我使用react，我得到这些错误“d3.zoom（...）。translate不是函数”和“d3.zoom（...）。scale不是函数”。我查看了文档，但找不到比例或只翻译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>
    );
}
javascript d3.js zoom scale translate
1个回答
2
投票

我不会深入讨论v3和v5之间的区别，因为它已经足够长了，我已经忘记了很多关于v3如何不同的细节和细节。相反，我将只讨论如何使用v5实现该示例。这个答案需要适应非地理情况 - 在这种情况下，地理投影正在进行视觉缩放。

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

因此，开始使用d3v5，在我们选择缩放后，我们可以使用以下选项设置所选元素的缩放：

selection.call(zoom.transform, transformObject);

基础转换对象的位置是：

d3.zoomIdentity

d3.zoomIdentity的scale（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中返回任何内容 - 这些现在是d3.event.transform的x，y，k属性

没有点击功能，我们可能会有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版本类似 - 但是通过应用缩放变换（就像我们最初做的那样），我们触发缩放事件，因此我们不需要将路径更新为click函数的一部分。

所有这些可能看起来像this。

我没有提供详细信息，点击过渡。当我们在单击和缩放时触发缩放功能时，如果我们包含转换，则平移也会转换 - 并且平移会触发太多缩放事件以使转换按需执行。我们的一个选择是仅在源事件是单击时才触发转换。此修改可能如下所示：

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);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.