d3 force directed graph don't select text

Question

Is there a way to stop to text from being selected when the drag behavior is turned off in a force directed graph?

The drag behavior is turned off using these lines:

svg.selectAll('g.gnode')
.on('mousedown.drag', null);

The pointer remains a pointer, rather than a cursor (as per the answer to this question). But dragging still ends up changing the pointer to a cursor and starts to select text. Is there a way to avoid this so no text is selected when dragging?

Here's a link to the fiddle.

score 3 · Answer 1 · answered Nov 23 '14 at 14:25

3

Disable the pointer-events on the entire groupnode. So instead of:

text {
    pointer-events: none;
}

use:

.gnode {
    pointer-events: none;
}

answered Nov 23 '14 at 14:25

iH8

27,722
4
67
76

1

Sorry, I'm probably being an idiot, but this doesn't seem to work: http://jsfiddle.net/pkerpedjiev/50v4px1m/10/. There also this other problem that when I disable the pointer events on the whole gnode, then I can't get things like mouseup or mousemove, right? – juniper- Nov 23 '14 at 15:41

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Using the answer to this question seems to do the trick. This requires adding the following definition to the css file:

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

And adding the noselect class to the gnodes:

  var gnodes = svg.selectAll('g.gnode')
  .data(graph.nodes)
  .enter()
  .append('g')
  .classed('gnode', true)
  .classed('noselect', true)
  .call(force.drag);

d3 force directed graph don't select text

2 Answers2