ziehe einen Kreis in einen anderen Kreis mit der Größe re und delete - javascript, d3.js, svg

Ich möchte eine Kategorie (größeren Kreis) und dann eine Unterkategorie (kleinerer Kreis) erstellen, so dass #category ein Elternteil von #subcategory ist, das D3 js verwendet.

Etwas wie https://www.droptask.com/

* Ich muss den Kreis innerhalb des Kreises #category ziehen und ablegen, was ich auch tun kann.

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

Ich möchte die Größe des Kreises ändern und automatisch anpassen, so dass ich den Kreis in den anderen Kreis ziehen kann.

Ich kann Kraft im Pack-Layout nicht richtig anwenden. Kann jemand pls einen Weg vorschlagen.

Antworten:

Natürlich kannst du. So würde ich das Problem angehen.

Gruppenhierarchie erstellen

Nehmen wir an, Sie höhlen Kategorien und Unterkategorien aus. Ich würde es so machen.

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

Unabhängig davon, welche Form Sie haben möchten, können Sie sie innerhalb der Gruppen zeichnen.

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

Jetzt können Sie Drag-Events schreiben. für Kategoriekreise. Um die Unterkategorie in einer Kategorie abzulegen, erstellen Sie ein "mouseover"Ereignis für die Kategoriegruppe, Setze ein boolesches Objekt, wenn du dich über einem Kategorienkreis befindest. Wenn du die Unterkategorie ablegst, vergewissere dich, dass das Boolean gesetzt ist mouseout).

Ich hoffe du bekommst die Idee. Versuche es. Komm zurück mit deiner Arbeit und wir können mehr helfen.