d3.js - 焦点布局拖拽鼠标功能

Question

我了解正在使用的 |、&、~ 运算符，但我仍然无法解释这些函数：

function d3_layout_forceDragstart(d) {
    d.fixed |= 2;
}
function d3_layout_forceDragend(d) {
    d.fixed &= ~6;
}
function d3_layout_forceMouseover(d) {
    d.fixed |= 4;
    d.px = d.x, d.py = d.y;
}
function d3_layout_forceMouseout(d) {
    d.fixed &= ~4;
}

Answer 1

这些只是用按位与、或和非设置位标志。如果您查看d3 源代码，则记录了它们的使用：

// The fixed property has three bits:
// Bit 1 can be set externally (e.g., d.fixed = true) and show persist.
// Bit 2 stores the dragging state, from mousedown to mouseup.
// Bit 3 stores the hover state, from mouseover to mouseout.
// Dragend is a special case: it also clears the hover state.

function d3_layout_forceDragstart(d) {
  d.fixed |= 2; // set bit 2
}

function d3_layout_forceDragend(d) {
  d.fixed &= ~6; // unset bits 2 and 3
}

function d3_layout_forceMouseover(d) {
  d.fixed |= 4; // set bit 3
  d.px = d.x, d.py = d.y; // set velocity to zero
}

function d3_layout_forceMouseout(d) {
  d.fixed &= ~4; // unset bit 3
}