个人中心
gpt4 book ai didi

javascript - 我可以在d3.js中使用drag.container来限制拖动区域吗？

转载 作者：行者123 更新时间：2023-12-02 16:28:01 25 4
gpt4 key购买 nike

我试图理解 d3.drag() 但我无法理解 drag.container() 中的内容部分，所以我在这里寻求帮助。

我是这样理解的:如果我加上容器功能，那么我就可以限制我可以拖动的区域。如果解释正确，那么我该如何使用它？

例如，在下面的代码片段中，我创建了一个可以拖动的圆圈。但我只想限制白色圆圈内的拖动区域。我可以为此使用 drag.container() 吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>

    <style>

    </style>

</head>
<body>



    <script>

        const svg = d3.select("body").append("svg").attr("width", "600").attr("height", "500").style("background", "lightblue");

        // Can I use this circle as the container?
        const circleAsContainer = svg.append("circle").attr("cx", "180").attr("cy", "200").attr("r", "120").attr("fill", "white")

        const circle = svg.append("circle").attr("cx", "120").attr("cy", "150").attr("r", "30").attr("fill", "orange").call(d3.drag() 
            .on("start", (event, d) => circle.attr("stroke", "black").attr("stroke-width", "4"))
            .on("drag", (event, d) => circle.attr("cx", d => event.x).attr("cy", d => event.y))
            .on("end", (event, d) => circle.attr("stroke", "none"))
        );


    </script>
</body>
</html>

最佳答案

容器元素只确定了event.x和event.y坐标的坐标系。例如，如果您的可拖动圆圈使用某些 SVG 元素支持的“dx”和“dy”属性相对于另一个元素定位，那将很有用。但是，container() 不会用于自动约束 event.x 和 event.y 以适应给定元素的视觉范围。

详细说明 Ouroborus 的评论:您的拖动事件处理程序中有以下几行:

circle.attr("cx", d => event.x).attr("cy", d => event.y))

在函数“d => event.x”和“d => event.y”中，您必须根据与您称为“容器”的内容相对应的数学公式来约束 event.x 和 event.y形状。

例如，要将可拖动元素限制在一个矩形区域内，公式很简单:

 circle.attr('cx', d => {
    if (event.x > 60 + 240) { // El dragged beyond the right-hand border
      return 60 + 240
    } else if (event.x < 60) { // El dragged beyond the left-hand border
      return 60
    } else {  // El is within the box's horizontal bounds
      return event.x
    }
  })

对于 y 轴，边界公式类似。最终结果如下所示(运行代码段并尝试一下):

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>

    <style>

    </style>

</head>
<body>


<script>

  const svg = d3.select('body').append('svg').attr('width', '600').attr('height', '500').style('background', 'lightblue')

  const containingRect = svg.append('rect')
    .attr('x', '60')
    .attr('y', '80')
    .attr('width', '240')
    .attr('height', '240')
    .attr('fill', 'grey')
  // Can I use this circle as the container?
  const circleAsContainer = svg.append('circle').attr('cx', '180').attr('cy', '200').attr('r', '120').attr('fill', 'white')

  const circle = svg.append('circle').attr('cx', '120').attr('cy', '150').attr('r', '30').attr('fill', 'orange')
    .call(d3.drag()
      .on('start', (event, d) => circle.attr('stroke', 'black').attr('stroke-width', '4'))
      .on('drag', (event, d) =>
        circle.attr('cx', d => {
          if (event.x > 60 + 240) { // El dragged beyond the right-hand border
            return 60 + 240
          } else if (event.x < 60) { // El dragged beyond the left-hand border
            return 60
          } else {  // El is within the box's horizontal bounds
            return event.x
          }
        }).attr('cy', d => {
          if (event.y > 80 + 240) { // El dragged beyond the top border
            return 80 + 240
          } else if (event.y < 80) { // El dragged beyond the bottom border
            return 80
          } else {  // El is within the box's vertical bounds
            return event.y
          }
        })
      ).on('end', (event, d) => circle.attr('stroke', 'none'))
    )


</script>
</body>
</html>

要将要拖动的元素限制在圆形区域内，您必须解决不同的数学问题。如果我正确理解您的问题，您希望在可拖动元素被拖动到包含圆形区域之外的 (x, y) 的情况下，该元素最终位于坐标 (targetX, targetY) 处:Visual diagram of the circular constraint problem

在此图中，(x, y) 代表 event.x 和 event.y。 (circleCenterX, circleCenterY)为外接圆的坐标cx、cy，radius表示外接圆的半径。鉴于这五个值，我认为您想要计算 targetX 和 targetY。

幸运的是，我已经为自己的项目解决了这个问题!下面是计算 targetX 和 targetY 的函数:

/**
 * @author Ann Yanich (ann.yanich@posteo.de)
 * Based loosely on TWiStErRob's answer https://stackoverflow.com/a/31254199/7359454
 * @license CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
 * Finds the intersection point between:
 *     * The circle of radius at (circleCenterX, circleCenterY)
 *     and
 *     * The half line going from (x, y) to the center of the circle
 *
 * I know this works from outside the circle, but I have not taken the
 * time to reason out what would happen if (x, y) lie inside the circle.
 *
 * @param x:Number x coordinate of point to build the half-line from
 * @param y:Number y coordinate of point to build the half-line from
 * @param radius:Number the radius of the circle
 * @param circleCenterX:Number The X coordinate of the center of the circle
 * @param circleCenterY:Number The Y coordinate of the center of the circle
 * @param validate:boolean (optional) whether to treat point inside the circle as error
 * @return an object with x and y members for the intersection
 * @throws if validate == true and (x,y) is inside the circle
 */
function pointOnCircle (x, y, radius, circleCenterX, circleCenterY, validate) {
  const dx = circleCenterX - x
  const dy = circleCenterY - y
  const distance = Math.sqrt(dx * dx + dy * dy)
  if (validate && distance < radius) {
    throw new Error('Point ' + [x, y] + 'cannot be inside the circle centered at ' +
      [circleCenterX, circleCenterY] + ' with radius' + radius + '.')
  }
  const normX = dx / distance
  const normY = dy / distance
  const targetX = circleCenterX - radius * normX
  const targetY = circleCenterY - radius * normY
  return {
    x: targetX,
    y: targetY
  }
}

您将按如下方式使用此函数:

circle.attr("cx", d => {
    if (isInCircle(event.x, event.y)) {
         return event.x;
    } else {
         return pointOnCircle(event.x, event.y, radius, circleCenterX, circleCenterY, true)["x"];
    }
}).attr("cy", d => {...})

我将把“isInCircle()”的实现留给你。我希望这些信息足以让您拼凑出一个可行的解决方案 :)

祝一切顺利，安

关于javascript - 我可以在d3.js中使用drag.container来限制拖动区域吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64028166/

25 4 0
文章推荐： amazon-ecs - 如何在 AWS ECS 容量提供程序中计算目标容量百分比
文章推荐： python - 如何在 Pandas 数据框中转换时间 2020-09-25T00 :20:00. 000Z
文章推荐： python - 如何用条件逐行替换
文章推荐： tensorflow - efficientnet.tfkeras 与 tf.keras.applications.efficientnet
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com