javascript - 将一个圆拖放到另一个圆内，并重新调整大小和自动调整

Question

我想使用 D3 js 创建类别(较大的圆圈)，然后创建子类别(较小的圆圈)，以便 #category 是 #subcategory 的父级。

类似于 https://www.droptask.com/

*我需要将圆圈拖放到#category 圆圈内，这是我能够做到的。

http://bl.ocks.org/mbostock/4063530

我想调整大小并自动调整圆圈，我可以将该圆圈拖动到另一个圆圈，它成为圆圈的子类别。

我无法在包布局中正确使用武力。有人可以建议一种方法吗？

Answer 1

当然可以。这是我解决这个问题的方法。

创建组层次结构。

假设您有类别和子类别。我会这样做。

<g id='category'></g>
<g id='sub_category'></g>

无论您想要什么形状，都可以将它们绘制在组内。

<g id='category'>
   <circle>...</circle>
   <circle>...</circle>
</g>
<g id='sub_category'>
   <circle>...</circle>
   <circle>...</circle>
   <circle>...</circle>
</g>

现在您可以编写拖动事件了。对于类别圈。为了将子类别拖放到类别中，请为类别组创建一个“mouseover”事件，当您位于类别圆圈上方时设置一个 bool 值，当您删除子类别时，请确保 bool 值已设置。 (显然你必须在鼠标悬停时取消设置)。

我希望你能明白。试一试。回来完成你的工作，我们可以提供更多帮助。