“d3 geotransform + join”显示错误的更新图形答案

【问题标题】："d3 geotransform + join" shows wrong update graphics“d3 geotransform + join”显示错误的更新图形
【发布时间】：2021-01-08 21:58:42
【问题描述】：

我试图通过动画应用加入/更新。

我的意图是

显示新“进入”大陆的绿色并将先前存在的大陆变成灰色。

然而，

对于第一个入口点，它正确显示为绿色，但是当它被更新时，新的“输入”点被涂成灰色，就好像那已经是现有的数据点一样，当我回来时，地图显示“部分绿色和部分灰色”，我坚信这是“BUG”

代码如下。

function drawFeatures(json) {
        var svg = d3.select("#map").select("svg");

        var transform = d3.geoTransform({ point: projectPoint });
        var path = d3.geoPath().projection(transform)

        var featureElement = svg.selectAll("path")
            .data(json.features)
            .join(
                enter => enter.append("path")
                .attr("fill", 'rgba(0,100,0,0.5)'),
                exit => exit
                .attr('fill', 'rgba(10,10,10,0.2)')
            )

        map.on("viewreset", update);
        map.on('zoomend', update)

        update();

        function update() {
            featureElement.attr("d", path);
        }

    }

完整的代码在下面的链接中。

https://codepen.io/jotnajoa/project/editor/ZjaOax

提前谢谢你。

【问题讨论】：

标签： javascript d3.js data-visualization geojson

【解决方案1】：

您没有正确使用selection.join()。当您将第二个函数视为处理退出时，它正在处理更新，因为它是传递给.join() 的第二个参数。传递给连接句柄的第一个函数进入，第二个句柄更新，第三个句柄退出。如果不移除第三个值，join() 会移除带有selection.remove() 的退出选择。

在你的情况下，行为可以解释如下：

您最初输入了一些数据，一切都按计划进行。
您绑定一个新的数据数组并进行连接。任何现有路径都被分配到新数据数组中的项目，这些项目是灰色的，因为它们正在使用新数据进行更新。如果数据数组中有多余的项目，则输入它们，您将它们输入为绿色。如果选择中的元素多于数据数组中的项目，则会在退出选择中删除它们。

如果您希望退出选择的颜色不同，那么您需要传递三个参数来加入：

        .join(
            enter => enter.append("path").attr("fill", 'rgba(0,100,0,0.5)'),
            update => update,
            exit => exit.attr('fill', 'rgba(10,10,10,0.2)')
        )

附带说明，除非使用.data() 的第二个参数，否则数据数组中的项目将通过索引与选择中的元素匹配，这将确定输入哪些项目或退出了哪些元素（如果不指定 .data() 的第二个参数，您就不能同时拥有两者。

【讨论】：