"d3 geotransform + join" 显示错误的更新图形

Question

我正在尝试应用 join/update 动画。

我的本意是

显示新 'entered' 大陆的绿色并将之前存在的大陆变成灰色。

然而，

对于第一个入口点，它正确地显示为绿色，但是当它更新时，新的 'entered' 点是灰色的，好像那是已经存在的数据点，当我回来时地图显示 'PARTIALLY GREEN AND PARTIALLY GREY'，我坚信 '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);
        }

    }

完整代码如下link.

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

提前致谢。

Answer 1

您没有正确使用 selection.join()。当您将第二个函数视为处理退出时，它正在处理更新，因为它是传递给 .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() 的第二个参数，你不能同时拥有这两个元素。

"d3 geotransform + join" 显示错误的更新图形

"d3 geotransform + join" shows wrong update graphics

javascript

data-visualization

geojson

d3.js