Question

我在这里创建了一个简单的小提琴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);

在拖拉机上我使用：

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个单位时，鼠标光标开始越来越远离对象。

我做错了什么？

Answer 1

您的代码将鼠标与圆圈取消关联。它正在反对这种差异＆＃34;是位置而不是绝对位置。

尝试：

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。

使用d3.js拖动和捕捉时如何将鼠标悬停在对象上

1 个答案: