Блог

Главная - Вопросы по программированию - При использовании многоразового шаблона диаграммы d3 как вы реализуете перетаскивание при отправке событий (d3v5 )?

При использовании многоразового шаблона диаграммы d3 как вы реализуете перетаскивание при отправке событий (d3v5 )?

#javascript #d3.js #reusability #dispatch #drag-event

Вопрос:

Я разрабатываю набор многоразовых диаграмм d3 — ванильных и на одной странице. (Я знаю, что это не очень хорошая практика, но так как это учебное упражнение для меня, мне легче следовать коду таким образом.) Используя шаблон из книги ProD3 Маркос Иглесиас https://www.apress.com/gp/book/9781484252024.

Я могу реализовать события on.click (иш).

Но я пытаюсь сделать это с помощью событий перетаскивания, используя этот «пример минимального перетаскивания d3». https://bl.ocks.org/codetricity/7ced6f3b3c95d64e7d7467e430716a63.

У меня есть объект диспетчера для трансляции события «customHover»:

const dispatcher = d3.dispatch('customDrag');

Затем у меня есть событие «.on», вложенное в функцию «draghandler» с помощью «d3.drag ()», вызываемой из «выбора ввода». Но я не уверен, что это правильный способ сделать это — я пробовал только конфигурацию, которая не вызывала ошибок.

         discs.enter()
            .append('circle')
            .attr('class', 'Discs')
            .attr('cx', 50)
            .attr('cy', 50)
            .attr('r', 20)
            .attr('stroke', 'black')
            .attr('fill', '#69a3b2');
    
        let dragHandler = d3.drag()
            .on('drag', function(d) {
                dispatcher.call('customDrag', this, d);
            });    
      
        discs.call(dragHandler);

Тогда функция доступа находится здесь:

     exports.on = function() {
        let value = dispatcher.on.apply(dispatcher, arguments);

        return value === dispatcher ? exports : value;
    };

Тогда я назвал это так:

     let position = [50]

    let myChart = d3.reusable.chart()
       .on('customDrag', function(d){
            d3.select(this).classed("dragging", true).attr('cx', d3.event.x).attr('cy', d3.event.y);
    });
 
    d3.select("#chart")
        .datum(position) 
        .call(myChart);

JSFiddle здесь: https://jsfiddle.net/Maltbyjim/y1mpuh4c/1/

Я не могу понять, где я ошибаюсь.

Единственное, что я, возможно, пропустил, — это возможный перевод координат x и y, но я не знаю, как бы я сделал это с координатами перетаскивания.

Извините, если это кажется глупым, я не очень хорошо понимаю d3 или js. И не смог увидеть предыдущий вопрос, который касался этой проблемы.

Ответ №1:

Я думаю, что проблема связана с этой строкой:

 discs.call(dragHandler);

Вместо этого вам нужно будет снова выбрать диски, чтобы применить перетаскивание:

 svg.select('.Discs').call(dragHandler);

Смотрите, как это работает здесь: https://jsfiddle.net/mku50xyh/1/

Метки: