1

我正在学习 d3 drag,我被这条线卡住了 d3.event.dx。当我在控制台中输出这个值时,它会在我拖动点时返回一些 int 值,我不知道这个返回值遵循什么模式。谁能解释一下?

vis.selectAll("circle.control")
    .data(function(d) { return points.slice(0, d) }) // array contains 2 3 ... 5 points respectively 
  .enter().append("circle")
    .attr("class", "control")
    .attr("r", 7)
    .attr("cx", x)
    .attr("cy", y)
    .call(d3.behavior.drag()
      .on("dragstart", function(d) {
        this.__origin__ = [d.x, d.y];
        //alert(this.__origin__);
      })
      .on("drag", function(d) {
        d.x = Math.min(w, Math.max(0, this.__origin__[0] += d3.event.dx));
        //alert(this.__origin__[0]);
        //alert(d3.event.dx);
        console.log(d3.event.dx);
       // console.log (d.x);

        d.y = Math.min(h, Math.max(0, this.__origin__[1] += d3.event.dy));

        //alert(this.__origin__[1]);
        bezier = {};
        update();
        vis.selectAll("circle.control")
          .attr("cx", x)
          .attr("cy", y);
      })
      .on("dragend", function() {
        delete this.__origin__;
      }));
4

2 回答 2

2

d3.event.dx 返回鼠标移动到拖动事件开始处的 x 坐标的 x 增量。

https://github.com/d3/d3-drag/blob/master/README.md#user-content-drag-events

于 2015-10-19T15:17:17.933 回答
1

事件对象的dx成员将是一些坐标,但可能对您没有意义。d3.eventDOM 事件,因此包含的信息可能无法反映您在可视化中所做的事情。

您可以使用 d3 提供的其他方法来获取更有意义的信息,例如d3.mouse()获取相对于容器的坐标。文档中的更多信息。

于 2013-03-19T09:58:34.427 回答