javascript - 移动设备上未触发拖动事件
问题描述
我正在制作一个基于 d3 force layout v5 的应用程序,需要与鼠标和触摸事件进行交互。我如何在此链接触摸事件?
这是我的问题示例代码,它只出现在整页上:https ://codepen.io/bragamonte/full/QRqvEd
var svg = d3.select("svg"), width = svg.property('clientWidth'),
height = svg.attr("height");
// height = 500;
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(d => (10 - d.source.order) * 9 ))
.force('charge', d3.forceManyBody().strength(-400).theta(1))
.force('collide', d3.forceCollide().radius(d => 40).iterations(2))
.force("center", d3.forceCenter(width / 2, height / 2))
;
const graph =
{
"nodes": [
{"id": 1, "name": "SIGMA", "order": 1, "icon": "https://github.com/favicon.ico"},
//
{"id": 2, "name": "PLAN", "order": 2, "icon": "https://github.com/favicon.ico"},
{"id": 3, "name": "DO", "order": 2, "icon": "https://github.com/favicon.ico"},
{"id": 4, "name": "CHECK", "order": 2, "icon": "https://github.com/favicon.ico"},
{"id": 5, "name": "ACTION", "order": 2, "icon": "https://github.com/favicon.ico"},
{"id": 6, "name": "Dashboard", "href": "/dashboard", "order": 3, "icon": "https://github.com/favicon.ico"},
{"id": 7, "name": "SS", "href": "/ss", "order": 3, "icon": "https://github.com/favicon.ico"},
{"id": 8, "name": "OS", "href": "/os", "order": 3, "icon": "https://github.com/favicon.ico"},
{"id": 9, "name": "Preventiva", "href": "/preventiva", "order": 3, "icon": "https://github.com/favicon.ico"},
{"id": 10, "name": "Estrutura", "href": "/cadastros/departamentos", "order": 3, "icon": "https://github.com/favicon.ico"},
{"id": 11, "name": "Relatórios", "href": "/relatorios", "order": 3, "icon": "https://github.com/favicon.ico"},
{"id": 12, "name": "Telemetria", "href": "/telemetria", "order": 3, "icon": "https://github.com/favicon.ico"}
],
"links": [
// main
{"source": "2", "target": 1, "distance": 130},
{"source": "3", "target": 1, "distance": 130},
{"source": "4", "target": 1, "distance": 130},
{"source": "5", "target": 1, "distance": 130},
//
{"source": "6", "target": 4, "distance": 50},
{"source": "7", "target": 3, "distance": 50},
{"source": "8", "target": 3, "distance": 50},
{"source": "9", "target": 3, "distance": 50},
{"source": "10", "target": 2, "distance": 50},
{"source": "11", "target": 4, "distance": 50},
{"source": "12", "target": 2, "distance": 50},
]
};
// var node, link, label;
function dragstarted(d) {
console.log(' >> drag started');
if (!d3.event.active) simulation.alphaTarget(0.3).restart()
d.fx = d.x
d.fy = d.y
}
function dragged(d) {
console.log(' >> dragged');
d.fx = d3.event.x
d.fy = d3.event.y
}
function dragended(d, a, b) {
console.log(' >> drag ended');
d.fx = d3.event.x
d.fy = d3.event.y
if (!d3.event.active) simulation.alphaTarget(0);
}
function dragsubject() {
return simulation.find(d3.event.x, d3.event.y);
}
var link =
svg.append("g")
.style("stroke", "#aaa")
.selectAll("line")
.data(graph.links)
.enter()
.append("line");
var node =
svg.selectAll("circle")
.data(graph.nodes)
.enter()
.append("g")
.attr("class", "nodes")
.attr("class", function (d) { return !!d.href ? 'node-link' : ''; })
.call(d3.drag()
.subject(dragsubject)
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
node.append("image")
.attr("xlink:href", function (d) { return d.icon || "resources/img/icon-sigma.png"; })
.attr("x", -25)
.attr("y", -25)
.attr("width", d => (10 - d.order) * 8)
.attr("height", d => (10 - d.order) * 8);
var label =
svg.append("g")
.attr("class", "labels")
.selectAll("text")
.data(graph.nodes)
.enter()
.append("text")
.attr("dx", d => (9 - d.order) * 6)
.attr("dy", d => (9 - d.order))
.text(function(d) { return d.name });
simulation.nodes(graph.nodes).on("tick", () => {
node.attr("transform", d => `translate(${d.x},${d.y})`)
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
label
.attr("x", function(d) { return d.x; })
.attr("y", function (d) { return d.y; })
});
simulation.force("link").links(graph.links);
当在移动设备上使用时,比如 chrome 开发者工具,事件拖动不会被触发,但是像start和end这样的事件是它。
解决方案
您应该为移动设备使用触摸事件。
d3.select("svg").on("touchstart", yourFunction);
d3.select("svg").on("touchmove", yourFunction);
推荐阅读
- php - Metabox 数据不更新
- postgresql - 当 pgAdmin 中的 csv 导入文件失败时,SERIAL PRIMARY KEY 不断计数
- reactjs - 数组的 setState 元素重写整个数组
- java - Gremlin:如何在有向无环图中有效地找到“根”?
- security - 离线 OTP 系统真的安全吗?
- android - 插入列错误(SQLite Android Studio)
- css - 我是否需要为此布局使用绝对 CSS 定位,还是可以通过 CSS Grid 简单地实现?
- python - 从字典列表中提取数据
- typescript - 如何获取与 Typescript 中的接口匹配的对象的所有属性?
- javascript - Firebase Firestore 不保存数组数据