使用 d3 可重用图表模式时,如何在调度事件 (d3v5 +) 时实现拖动?
When using a d3 Reusable Chart pattern how do you implement on drag when Dispatching Events (d3v5 +)?
我正在开发一套 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 不是特别了解。并且看不到解决此问题的先前问题。
我认为问题与这一行有关:
discs.call(dragHandler);
您需要再次 select 圆盘来应用拖动:
svg.select('.Discs').call(dragHandler);
看到它在这里工作:https://jsfiddle.net/mku50xyh/1/
我正在开发一套 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 不是特别了解。并且看不到解决此问题的先前问题。
我认为问题与这一行有关:
discs.call(dragHandler);
您需要再次 select 圆盘来应用拖动:
svg.select('.Discs').call(dragHandler);
看到它在这里工作:https://jsfiddle.net/mku50xyh/1/