我正在開發一組 d3 可重用圖表 - 香草和一頁。（我知道這不是很好的練習，但因為這對我來說是一個學習練習，我發現以這種方式遵循代碼更容易。）使用 Marcos Iglesias 的 ProD3 Book 中的模式 https://www.apress.com/gp/書/9781484252024。
我可以實作 on.click 事件（ish）。
但我正在嘗試使用此“d3 最小拖動示例” https://bl.ocks.org/codetricity/7ced6f3b3c95d64e7d7467e430716a63來處理拖動事件。
我有 Dispatcher 物件來廣播 '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。并且看不到解決此問題的先前問題。
uj5u.com熱心網友回復：
我認為這個問題與這條線有關：
discs.call(dragHandler);
您將需要再次選擇光碟以應用拖動：
svg.select('.Discs').call(dragHandler);
看到它在這里作業：https : //jsfiddle.net/mku50xyh/1/
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326007.html
標籤：javascript d3.js 可重用性 派遣 拖拽事件
上一篇：如何使用geoPath居中和縮放
下一篇：D3.js將行名附加到它