我正在尝试动态模拟点击,我已经使用此功能对三个缩进的树进行了模拟:
document.onmousemove = function(e) {
cursorX = e.pageX;
cursorY = e.pageY;
}
function ret_vw(v) {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
return (v * w) / 100;
}
function simulateClick(x, y) {
var s = d3.select(document.elementFromPoint(x, y));
s.on("click")(s.datum());
}
function multiple_click() {
//onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
if (cursorX >= ret_vw(15.25) && cursorX < ret_vw(42)) {
simulateClick(cursorX + ret_vw(28) - window.pageXOffset, cursorY - window.pageYOffset);
simulateClick(cursorX + ret_vw(56) - window.pageXOffset, cursorY - window.pageYOffset);
}
else if (cursorX >= ret_vw(43.25) && cursorX < ret_vw(70.25)) {
simulateClick(cursorX - ret_vw(28) - window.pageXOffset, cursorY - window.pageYOffset);
simulateClick(cursorX + ret_vw(28) - window.pageXOffset, cursorY - window.pageYOffset);
}
else if (cursorX >= ret_vw(71.25)) {
simulateClick(cursorX - ret_vw(28) - window.pageXOffset, cursorY - window.pageYOffset);
simulateClick(cursorX - ret_vw(56) - window.pageXOffset, cursorY - window.pageYOffset);
}
else
console.log("no , cursorX = " + cursorX + " , cursorY = " + cursorY + " vw = " + ret_vw(15.25));
}
它适用于下面的情况,如果我单击一个,它将单击另外两个,确定为三个:
(不单击)
(单击)
但是我遇到两个问题,如果我将一个缩进的树之一推到窗口外,它将无法工作,其次,我需要动态地进行操作,因为我不会总是缩进3个(我可以像二,四,五棵树...)
这是我的函数multi_click无法使用(窗口外的树..)的情况下的图片:
感谢帮助人员!
(带有d3.js的已识别树的源:https://bl.ocks.org/mbostock/1093025)
答案 0 :(得分:1)
我建议不要使用鼠标事件来触发点击-最终会调用此点击功能:
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
您将创建一个新的mouseClick函数,该函数将替换当前在单击鼠标时发生的函数。 这将为所有匹配项调用当前的点击功能。这是概念:
function mouseClick(d) {
// Assuming you have multiple roots (example only has root)
for (root in roots) {
// Find d in the current root (by name?)
matching_d = ...
click(matching_d)
}
}