d3 рисовать один раз при наведении мыши

Question

d3 рисовать один раз при наведении мыши

1

Я использую 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();
    }

});

Oam Psy 02 окт. 2017, в 10:47

Источник

Теги:

javascript

d3.js

1 ответ

Ещё вопросы

Gerardo Furtado · Accepted Answer · 2017-10-02T06-48-00.000Z

Причина, по которой вы видите бесконечное время "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.
Вместо удаления и добавления одного и того же элемента вы можете изменить его непрозрачность или отображение.