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"无休止时间的原因是因为该元素在每次鼠标悬停时都会附加，但不会被删除。 这就是为什么：

您正在设定课程...

.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')没问题document.createElement('div')顺便说一句，您缺少了appendChild ），但是您可以使用D3方法来实现。
3. 除了删除和附加相同的元素外，您还可以更改其不透明度或显示。