3

我创建了一个 JSFiddle，我希望能够沿着路径拖动一个圆圈，但我遇到了问题。这是 JSFiddle 的链接：http: //jsfiddle.net/fHBpC/2/

以下是我遇到的问题：

  1. 在 dragMove 内部，参数“d”是未定义的。

  2. 我的路径应该从 (0,0) 开始到 (200, 200) 并在 (150, 150) 结束，但它只从 (0, 0) 开始并到 (200, 200)。

  3. 如何让圆圈仅沿线拖动？

对应代码：

1.

function dragMove(d) {
    console.log("dragging a circle");
    d.x += d3.event.dx;
    d.y += d3.event.dy;
    d3.select(this)
        .attr('x', d.x)
        .attr('y', d.y)
        .attr("transform", "translate(" + d.x + "," + d.y + ")");
}

2.

var path = content.append("path").attr("d", "M 100 100 L 200 200 L 150 150").style("stroke-width", 5).style("stroke", "steelblue");
4

1 回答 1

1
  1. 您可以使用this来引用圆形元素。但是该功能还有一些问题dragMove()。
    • 请注意，圆没有属性xand y，它们被称为cxand cy。
    • 这些属性不是数字，它们是 type SVGAnimatedLength。这意味着，您不能对它们进行算术运算。
    • 您正在尝试以三种方式移动圆圈：
      1. 通过更改属性
      2. 通过设置圆心的属性
      3. 通过一个transform
    • 其中一种方法就足够了。此外，transform它独立于cx/cy属性/属性，即它使圆圈移动了额外的量，以便圆圈移动的距离是您预期的两倍。
  2. 当从 200,200 回到最后一位到 150,150 时，您的路径不会添加额外的“油漆涂层”，这与从 0,0 到 200,200 时已经应用的油漆区分开来。
  3. 这真的很困难，并且取决于您在指针离开路径时的预期行为。最直观的行为可能是圆圈总是移动到路径上最接近指针的点。然而，这是一个重要的计算，甚至不需要一个明确的结果，除非它是一条简单的直线，这很容易。您唯一的帮助是getPointAtLength()返回点的方法。这意味着，您可以使用指针的向下或向右移动将圆进一步移动到路径的末尾，并类似地使用向左或向上移动将其进一步移动到起点（参见固定的 jsFiddle）。这有一些缺点，即一般来说，即使指针在路径上，圆圈也会在其他地方（在您的示例中不会出现这种情况，因为初始路径段是 45° 笔划），如何如果我已经到达屏幕的边缘并且无法进一步移动，我会到达路径的尽头吗？或者，您可以抛出一些值getPointAtLength()并选择最接近指针位置的值。
于 2012-12-10T07:20:59.053 回答