Question

我正在学习d3拖动，我被困在这一行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__;
      }));

Answer 1

事件对象的dx成员将是某个坐标，但可能不是对您有意义的东西。 d3.event是DOM event，因此所包含的信息可能无法反映您在可视化中所做的工作。

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

中的更多信息

Answer 2

d3.event.dx将鼠标移动到w.r.t的x delta返回到拖动事件开始的x坐标。

https://github.com/mbostock/d3/wiki/Drag-Behavior

d3.event.dx返回什么？

2 个答案: