A detailed description of this example can be found at emptypipes.org/2017/04/29/d3v4-selectable-zoomable-force-directed-graph/.
- Clicking on a node selects it and de-selects everything else.
- Shift-clicking on a node toggles its selection status and leaves all other nodes as they are.
- Shift-dragging toggles the selection status of all nodes within the selection area.
- Dragging on a selected node drags all selected nodes.
- Dragging an unselected node selects and drags it while de-selecting everything else.
- Remove selected nodes, re-render the simulation.
Upgrading selectable zoomable force directed graph implementation to D3 v4 required a few minor and not-so-minor changes.
- The new brush in v4 captures the shift, alt and meta keys to perform some actions by default. To get around this, I forked
d3-brushand modified it so that it doesn't capture the shift events. The new version (d3-brush-lite) can be found on github. There is an open github issue to disable this behavior ind3-brush. - Because the d3-drag behavior consumes all events in v4, it is no longer necessary to stop propagation.
- The brush creates its own overlay which catches all events meaning that we don't need to turn the zoom behavior off when the shift key is pressed.
- Whether a node is fixed is specified by the
.fxand.fyparameters. This eliminates the need to set the.fixedparameter on each node. - The force layout in v4 lets us specify an accessor for the nodes that a link connects. This lets us use ids for a link's endpoint and makes the graph specification JSON easier to read:
| Variables | Hold SHIFT | release SHIFT | ||
|---|---|---|---|---|
| Mouse drag for selecting | No mouse's activity | Mouse drag for selecting | No mouse's activity | |
| brushMode | true |
true |
false |
false |
| brushing | true |
false |
false |
false |
Tiếng Việt
A detailed description of this example can be found at emptypipes.org/2017/04/29/d3v4-selectable-zoomable-force-directed-graph/.
- Click vào một node để select nó, đồng thời bỏ select những node khác
- Giữ SHIFT, đồng thời click vào một node để select/ bỏ select node đấy, trong khi giữa nguyên hiện trạng của những node khác.
- Giữ SHIFT, đồng thời giữ chuột trái để quét 1 vùng trên màn hình. Những node nằm trong vùng này sẽ bị "lật" trạng thái, nghĩa là đang bình thường sẽ thành select, đang select sẽ trở về bình thường.
- Kéo một node bị select sẽ kéo theo các node bị select khác.
- Dragging an unselected node selects and drags it while de-selecting everything else.
- Remove selected nodes, re-render the simulation.
So với bản "selectable zoomable force directed graph" cũ dùng D3 v3, việc nâng lên D3 v4 yêu cầu một số thay đổi nhỏ và không nhỏ sau:
- Tính năng "brush" mới trong D3 v4 cho phép bắt phím SHIFT, ALT, và các phím "meta" để thực hiện một số nhiệm vụ mặc định thiết lập bởi D3. Để vượt qua vụ này, tác giả (Peter Kerpedjiev) đã forked
d3-brushvà chỉnh sửa để nó không còn bắt sự kiện ứng với phím SHIFT. Phiên bản có chỉnh sửa này (d3-brush-lite) được lưu ở đây on github. Trên Github của D3js, một issue đã được tạo đề nghị bỏ đi tính năng bắt SHIFT trongd3-brush. - Because the d3-drag behavior consumes all events in v4, it is no longer necessary to stop propagation.
- The brush creates its own overlay which catches all events meaning that we don't need to turn the zoom behavior off when the shift key is pressed.
- Whether a node is fixed is specified by the
.fxand.fyparameters. This eliminates the need to set the.fixedparameter on each node. - The force layout in v4 lets us specify an accessor for the nodes that a link connects. This lets us use ids for a link's endpoint and makes the graph specification JSON easier to read:
