使用 d3.js 拖动和对齐时如何使鼠标悬停在对象上
How to keep mouse over object when using drag and snap to with d3.js
我在这里创建了一个简单的 fiddle http://jsfiddle.net/oqu8j072/
密码是:
function onDragDrop(dragHandler, dropHandler) {
var drag = d3.behavior.drag();
drag.on("drag", dragHandler).on("dragstart", startHandler).on("dragend", dropHandler);
return drag;
}
function startHandler() {
d3.select(this).style('cursor', 'move');
}
function dropHandler(d) {
//Finished
}
function dragmove(d) {
d.x += Math.round(d3.event.dx / 10) * 10;
d.y += Math.round(d3.event.dy / 10) * 10;
//d.x += d3.event.dx;
//d.y += d3.event.dy;
d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
}
var DrawCircle = function(container) {
var d = [{ x: 50, y: 50 }];
var circle = container.data(d).append("g").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }).call(onDragDrop(dragmove, dropHandler));
circle.append("ellipse").attr("cx", 20).attr("cy", 20).attr("rx", 20).attr("ry", 20).attr("stroke", "#FF0000").attr("stroke-width", 1).attr("fill", "#FF0000");
}
d3.selectAll("svg").remove();
var svgContainer = d3.select("#MainDiv").append("svg").attr("width", 800).attr("height", 600).attr("version", 1.1).attr("xmlns", "http://www.w3.org/2000/svg").attr("viewBox", "-40, -40, 1600, 1200");
DrawCircle(svgContainer);
在 dragmove 上我使用:
d.x += Math.round(d3.event.dx / 10) * 10;
d.y += Math.round(d3.event.dy / 10) * 10;
使圆捕捉到每 10 个视框单位。
如果我使用注释代码:
d.x += d3.event.dx;
d.y += d3.event.dy;
然后圆圈按预期移动,但是当我使用代码使其一次移动 10 个单位时,鼠标光标开始越来越远离对象。
我做错了什么?
您的代码正在取消鼠标与圆圈的关联。它反对 "difference" 是位置而不是绝对位置。
尝试:
function dragmove(d) {
d.x += d3.event.dx;
d.y += d3.event.dy;
movex = Math.round(d.x / 50) * 50;
movey = Math.round(d.y / 50) * 50;
d3.select(this).attr("transform", "translate(" + movex + "," + movey + ")");
}
已更新 fiddle。
我在这里创建了一个简单的 fiddle http://jsfiddle.net/oqu8j072/
密码是:
function onDragDrop(dragHandler, dropHandler) {
var drag = d3.behavior.drag();
drag.on("drag", dragHandler).on("dragstart", startHandler).on("dragend", dropHandler);
return drag;
}
function startHandler() {
d3.select(this).style('cursor', 'move');
}
function dropHandler(d) {
//Finished
}
function dragmove(d) {
d.x += Math.round(d3.event.dx / 10) * 10;
d.y += Math.round(d3.event.dy / 10) * 10;
//d.x += d3.event.dx;
//d.y += d3.event.dy;
d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
}
var DrawCircle = function(container) {
var d = [{ x: 50, y: 50 }];
var circle = container.data(d).append("g").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }).call(onDragDrop(dragmove, dropHandler));
circle.append("ellipse").attr("cx", 20).attr("cy", 20).attr("rx", 20).attr("ry", 20).attr("stroke", "#FF0000").attr("stroke-width", 1).attr("fill", "#FF0000");
}
d3.selectAll("svg").remove();
var svgContainer = d3.select("#MainDiv").append("svg").attr("width", 800).attr("height", 600).attr("version", 1.1).attr("xmlns", "http://www.w3.org/2000/svg").attr("viewBox", "-40, -40, 1600, 1200");
DrawCircle(svgContainer);
在 dragmove 上我使用:
d.x += Math.round(d3.event.dx / 10) * 10;
d.y += Math.round(d3.event.dy / 10) * 10;
使圆捕捉到每 10 个视框单位。
如果我使用注释代码:
d.x += d3.event.dx;
d.y += d3.event.dy;
然后圆圈按预期移动,但是当我使用代码使其一次移动 10 个单位时,鼠标光标开始越来越远离对象。
我做错了什么?
您的代码正在取消鼠标与圆圈的关联。它反对 "difference" 是位置而不是绝对位置。
尝试:
function dragmove(d) {
d.x += d3.event.dx;
d.y += d3.event.dy;
movex = Math.round(d.x / 50) * 50;
movey = Math.round(d.y / 50) * 50;
d3.select(this).attr("transform", "translate(" + movex + "," + movey + ")");
}
已更新 fiddle。