Disabilita la cancellazione del pennello D3.js

Question

Vorrei utilizzare un pennello D3.js per consentire agli utenti di selezionare un intervallo di valori su un asse. Per impostazione predefinita, facendo clic all'esterno del pennello lo si cancella, in modo che non venga selezionato alcun intervallo.

Tuttavia, desidero regolare questo comportamento in modo che facendo clic all'esterno del pennello non si modifichi l'estensione del pennello. In effetti, non ci dovrebbe essere modo di cancellare il pennello, alcuni intervalli dovrebbero sempre essere selezionati.

Credo di dover agganciare lo in qualche modo per disabilitare la compensazione, ma non so davvero come farlo.

Ecco un esempio del tipo di interfaccia di cui sto parlando (Fiddle). Quando fai clic a sinistra o a destra della barra nera, il pennello viene cancellato e la barra scompare.

Come faccio a disattivare questo comportamento?

Answer 1

d3 il pennello di design chiama "brushmove()" quando un utente preme un mouse sull'elemento del pennello (ad esempio sull'evento 'mousedown.brush'). Se effettivamente porta a ripristinare l'estensione del pennello precedente.

Una possibile soluzione è sostituire il gestore originale mousedown.brush con quello personalizzato. Il gestore personalizzato chiamerà i gestori originali solo dopo che il mouse è stato spostato dopo il mouse iniziale.

var brushNode = chart.append("g") 
    .call(brush); 

brushNode 
    .selectAll("rect") 
    .attr("y", -10) 
    .attr("height", 10); 

// store the reference to the original handler 
var oldMousedown = brushNode.on('mousedown.brush'); 

// and replace it with our custom handler 
brushNode.on('mousedown.brush', function() { 
    brushNode.on('mouseup.brush', function() { 
     clearHandlers(); 
    }); 

    brushNode.on('mousemove.brush', function() { 
     clearHandlers(); 
     oldMousedown.call(this); 
     brushNode.on('mousemove.brush').call(this); 
    }); 

    function clearHandlers() { 
     brushNode.on('mousemove.brush', null); 
     brushNode.on('mouseup.brush', null); 
    } 
}) 

Vedere demo.