使用 d3 可重用图表模式时，如何在调度事件 (d3v5 +) 时实现拖动？

Question

我正在开发一套 d3 可重用图表 - 香草和一页。（我知道这不是很好的做法，但因为这对我来说是一个学习练习，所以我发现以这种方式遵循代码更容易。）使用 Marcos Iglesias https://www.apress.com/gp/book/9781484252024.

的 ProD3 Book 中的模式

我可以实施 on.click 个事件（差不多）。

但我正在尝试使用这个“d3 最小拖动示例”来处理拖动事件 https://bl.ocks.org/codetricity/7ced6f3b3c95d64e7d7467e430716a63。

我有 Dispatcher 对象来广播 'customHover' 事件：

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

然后我将“.on”事件嵌套在“draghandler”函数中，并从“enter selection”中调用“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);

那么accessor函数在这里：

    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 不是特别了解。并且看不到解决此问题的先前问题。

Answer 1

我认为问题与这一行有关：

discs.call(dragHandler);

您需要再次 select 圆盘来应用拖动：

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

看到它在这里工作：https://jsfiddle.net/mku50xyh/1/

使用 d3 可重用图表模式时，如何在调度事件 (d3v5 +) 时实现拖动？

When using a d3 Reusable Chart pattern how do you implement on drag when Dispatching Events (d3v5 +)?

javascript

d3.js

reusability

dispatch

drag-event