javascript - d3 鼠标悬停时绘制一次

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" 的原因无限次是因为每次鼠标悬停时都会附加该元素，但不会将其删除。这就是原因:

您正在设置类(class)...

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

但是您没有按类别进行选择:

me.selectAll('btn-close')

应该是:

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

PS:这超出了您的问题范围，但我想对您的代码进行一些考虑。请将此视为建设性的批评，以便您可以编写更惯用的D3:

1. 您不需要循环来在 D3 代码中附加元素。使用选择。惯用的 D3 代码的循环(如果有的话)也很少。
2. 使用 D3 方法来操作 DOM。 document.createElement('div')没有问题(顺便说一句，您缺少 appendChild )，但您可以使用 D3 方法来做到这一点。
3. 您可以更改其不透明度或显示，而不是删除和附加同一元素。