20

我正在尝试使用 d3.js 的d3.behavior.drag() drag事件来更新我的数据模型（不立即设置元素位置），然后运行我的“绘制”函数以根据更新的模型更新所有元素。此外，我transform在包含的 group 元素上使用了 translate 以移动与拖动对象关联的所有元素（我从下面链接的示例中删除了额外的元素）。这会导致被拖动的元素在被拖动时会卡住，拖得越快，情况就会越糟糕。

请参阅jsFiddle 上的这个精简示例。

这是示例的代码：

blocks = [
  { x: 0, y: 0 }
];

drag = d3.behavior.drag()
  .origin(Object)
  .on("drag", function(d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    draw();
  });

svg = d3.select("body")
  .append("svg:svg")
  .attr("width", 600)
  .attr("height", 600);

function draw() {
  g = svg.selectAll("g")
    .data(blocks);

  gEnter = g.enter().append("g");

  g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });

  gEnter.append("rect")
    .attr("height", 100)
    .attr("width", 100)
    .call(drag);
}

draw()​;
4

3 回答 3

41

drag您正在调用rect元素，但您正在转换其父元素：g元素。

问题是拖动组件使用鼠标相对于父级的位置来确定新的d3.event.x和d3.event.y。因此，如果您transform在用户拖动时移动（即）父级，事情就会变得一团糟。

解决方案是调用drag您正在移动的相同元素；在这种情况下，g元素：

function draw() {
  g = svg.selectAll("g")
    .data(blocks);

  gEnter = g.enter().append("g")
    .call(drag);

  g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });

  gEnter.append("rect")
    .attr("height", 100)
    .attr("width", 100);
}

请参阅更正的小提琴：http: //jsfiddle.net/EMNGq/14/

于 2012-10-26T01:47:41.640 回答
7

我和达尔文有同样的问题。拖动处理程序位于附加了 D3 数据的子对象上，但需要将转换应用于父组（而不是 d3）。

我通过将原点函数设置为返回 x:0, y:0 然后在事件中使用 x 值而不是 dx 来解决它。

例如

var drag = d3.behavior.drag()
    .origin(function(d,i) { return {x:0, y:0}; })
    .on("drag", function (d) {  movePosition(d3.event.x);   });
于 2013-05-24T23:11:57.127 回答
3

Nautat 为您的案例提供了很好的解决方案。

我的情况稍微复杂一些。我的数据绑定在我要转换的 g 节点之下。在这种情况下，我不能简单地将 .call(drag) 移动到 g 级别。

我提交了一个拉取请求以使基本坐标空间可定制： https ://github.com/mbostock/d3/pull/1055

于 2013-02-05T20:16:40.903 回答