Estoy desarrollando un conjunto de gráficos reutilizables d3: vainilla y en una página. (Sé que esto no es una gran práctica, pero como este es un ejercicio de aprendizaje para mí, me resulta más fácil seguir el código de esta manera). Usando el patrón del libro ProD3 de Marcos Iglesias https://www.apress.com/gp/ libro/9781484252024 .

Puedo implementar eventos on.click (ish).

Pero estoy tratando de hacerlo con eventos de arrastre usando este "ejemplo de arrastre mínimo d3" https://bl.ocks.org/codetricity/7ced6f3b3c95d64e7d7467e430716a63 .

Tengo el objeto Dispatcher para transmitir el evento 'customHover':

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

Luego tengo el evento ".on" anidado en la función "draghandler" con el "d3.drag()" llamado desde "ingresar selección". Pero no estoy seguro de si esta es la forma correcta de hacerlo: es solo la configuración que probé que no causó errores.

 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);

Entonces la función de acceso está aquí:

 exports.on = function() { let value = dispatcher.on.apply(dispatcher, arguments); return value === dispatcher ? exports : value; };

Entonces he llamado a esto de esta manera:

 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 aquí: https://jsfiddle.net/Maltbyjim/y1mpuh4c/1/

No puedo entender dónde me estoy equivocando.

Lo único que creo que me he perdido es la posible traducción de las posiciones de las coordenadas x e y, pero no sé cómo lo haría con las coordenadas de arrastre.

Lo siento si esto parece tonto, no entiendo d3 o js particularmente bien. Y no pude ver una pregunta anterior que abordara este problema.