Question

我正在使用d3js创建一个按钮列表 - 我能够成功完成。

当您将鼠标悬停在按钮上时，我正在尝试添加一个X（关闭）按钮。然而，x出现在检查DOM时，x元素被绘制了无数次。

btnArray.forEach(function (button) {

    const btn = document.createElement('div');
    btn.type = 'button';
    btn.value = button.name;
    btn.onClick = evt => {
        // do soemthing on click
    }

    btn.onmouseover = function(e) {
        var me = d3.select(btn);
        me.append('div')
            .classed({'btn-close': true})
            .text('x');
    }

    btn.onmouseout = function(e) {
        var me = d3.select(btn);
        me.selectAll('btn-close')
            .remove();
    }

});

Answer 1

您看到"X"无休止时间的原因是因为每次鼠标悬停都会附加该元素，但不会删除该元素。这就是原因：

您正在设置课程......

.classed({'btn-close': true})

但是你没有按班选择：

me.selectAll('btn-close')

应该是：

me.selectAll('.btn-close')
//class here--^

PS：这超出了您的问题的范围，但我想对您的代码进行一些考虑。请把它作为一种建设性的批评，这样你就可以写一个更惯用的D3：

您不需要在D3代码中添加元素的循环。使用选择。如果有的话，惯用的D3代码只有很少的循环。
使用D3方法操作DOM。 document.createElement('div')没有问题（顺便说一句，你错过了appendChild），但你可以使用D3方法做到这一点。
您可以更改其不透明度或显示内容，而不是删除和追加相同的元素。

d3在鼠标悬停时绘制一次

1 个答案: