Javascript &引用；d3地理变换+；加入；显示错误的更新图形

我试图用动画应用“加入/更新”

我的本意是

显示新“进入”大陆的绿色 把以前存在的大陆变成灰色

但是,

对于第一个入口点，它正确地显示为绿色， 但当它被更新时，新输入的点被涂成灰色，就好像已经存在的数据点一样，当我回来时，地图显示“部分绿色和部分灰色”，我坚信这是“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);
        }

    }

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

---

提前感谢您。

您没有正确使用

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（）的第二个参数，则不能同时使用这两个参数）