javascript - Deshabilitar la eliminación del pincel D3.js

user-interface brush

Question

Me gustaría utilizar un pincel D3.js para permitir a los usuarios seleccionar un rango de valores en un eje. De forma predeterminada, al hacer clic fuera del pincel se borra, de modo que no se selecciona ningún rango.

Sin embargo, me gustaría ajustar este comportamiento para que hacer clic fuera del pincel no altere la extensión del pincel. En efecto, no debería haber forma de despejar el pincel, siempre se debe seleccionar algún rango.

Creo que tengo que conectarme al evento del brush para desactivar el claro, pero realmente no sé cómo hacerlo.

Aquí hay un ejemplo del tipo de interfaz de la que estoy hablando ( Fiddle ). Cuando hace clic a la izquierda o derecha de la barra negra, el pincel se borra y la barra desaparece.

¿Cómo puedo desactivar este comportamiento?

Answer 1

d3 brush by design llama ''brushmove ()'' una vez que un usuario presiona un mouse en el elemento brush (es decir, en el evento ''mousedown.brush''). Si efectivamente conduce a restablecer la extensión del pincel anterior.

Una solución posible es reemplazar el controlador mousedown.brush original por el personalizado. El controlador personalizado solo llamará a los controladores originales una vez que se haya movido el mouse después del mousedown inicial.

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);
    }
})

Vea la demostración .