鼠标拖动布局功能

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
}