Отключить очистку кисти D3.js

Я хотел бы использовать кисть D3.js, чтобы пользователи могли выбирать диапазон значений на оси. По умолчанию щелчок за пределами кисти очищает ее, так что диапазон не выделяется.

Однако я хотел бы настроить это поведение так, чтобы щелчок за пределами кисти не изменял размер кисти. По сути, не должно быть никакого способа очистить кисть, всегда должен быть выбран какой-то диапазон.

Я считаю, что мне нужно каким-то образом подключиться к событию brush, чтобы отключить поляне, но я действительно не знаю, как это сделать.

Вот пример интерфейса, о котором я говорю (Fiddle). При щелчке слева или справа от черной полосы кисть очищается, а полоса исчезает.

Как я могу отключить это поведение?


javascript user-interface d3.js brush
person Jake    schedule 03.08.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Кисть d3 по дизайну вызывает 'brushmove()', когда пользователь нажимает мышью на элемент кисти (т.е. в событии 'mousedown.brush'). Если эффективно приводит к сбросу предыдущего экстента кисти.

Возможный обходной путь — заменить исходный обработчик mousedown.brush на пользовательский. Пользовательский обработчик будет вызывать исходные обработчики только после того, как мышь была перемещена после первоначального нажатия кнопки мыши.

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

См. демонстрацию.

person amakhrov    schedule 04.08.2013
comment
Я получил идею. Но мне интересно, вы получили сообщение об ошибке, например: Uncaught TypeError: Cannot read property 'call' of undefined при запуске этого кода, кажется, что нет обработчика события mousemove.brush, привязанного к brushNode. - person Kuan; 12.01.2015
comment
Привет @kuan, ты решил вышеуказанную проблему? Возникли ли какие-либо проблемы/побочные эффекты при использовании вышеуказанного решения с ошибкой?? - person Nithin CV; 29.01.2015
comment
@Nithin CV Poyyil Нет, это работает в приведенном выше примере, но не работает в моем случае. Я использую следующий способ: сначала запомнить размер кисти, а в конце кисти if (!brush.empty()) {ext = brush.extent();}else { brush.extent(ext); } и установите кисть и перерисуйте ось - person Kuan; 29.01.2015
comment
как я могу увидеть, начался ли ход при выборе? - person Frazer Kirkman; 09.03.2017
comment
@Kuan, ты можешь избавиться от этой ошибки, удалив brushNode.on('mousemove.brush').call(this); - person Frazer Kirkman; 09.03.2017
comment
о, мне пришлось использовать mouseOver, чтобы установить флаг, если выделение перемещается / корректируется, иначе ничего не делать - person Frazer Kirkman; 09.03.2017