D3 - Программное управление кистью И ручкой кисти

Я пытаюсь установить некоторые ограничения на поведение кисти (и ручки кисти). Я хочу установить минимальное значение между началом и концом кисти.

Я начал с этого:

https://bl.ocks.org/mbostock/4349545

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

Я подумал, что, возможно, просто изменив значения:

d3.event.selection

может работать. Например, чтобы убедиться, что пользователь никогда не сможет прокрутить страницу менее чем на 150 пикселей, я написал следующее:

var s = d3.event.selection;
if (s[0] < 150) {
s[0] = 150;
}

Это работает для ручки кисти. Но не влияет на кисть.

Я поместил измененный код MB в следующее место:

http://plnkr.co/edit/fDBdDrfN5kySWDYGzJdR?p=preview

Любые общие идеи о продвижении вперед будут оценены.


d3.js brush
person markthekoala    schedule 16.10.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Дополнительная строка, описанная в моем исправленном вопросе выше, похоже, решила проблему.

В итоге:

gBrush.call(brush.move, [150, s[1]]);

был добавлен в:

var s = d3.event.selection;
if (s[0] < 150) {
s[0] = 150;
gBrush.call(brush.move, [150, s[1]]);
}

Более подробно, кажется, что дескриптор кисти не получает никакого управления по умолчанию от мыши через фреймворк, и ему нужно указать, как двигаться, используя следующую строку:

handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + s[i] + "," + height / 2 + ")"; });

Однако кисть, похоже, получает управление по умолчанию от мыши через фреймворк. Таким образом, обычно ручке кисти нужно указывать, как реагировать на мышь, а кисть — нет.

В особой ситуации, например, при программном управлении кистью. И ручке щетки, и самой щетке нужно сказать, как себя вести. Синтаксис этих двух элементов немного отличается.

Я добавил дополнительную строку к приведенному выше фрагменту, который привел к желаемому поведению:

var s = d3.event.selection;
if (s[0] < 150) {
s[0] = 150;
gBrush.call(brush.move, [150, s[1]]);
}

Вызов кисти позаботится о ее новом поведении.

Затем на изменение массива s воздействует строка кода ниже, которая изменяет дескриптор кисти:

handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + s[i] + "," + height / 2 + ")"; });

Кажется, это работает.

person markthekoala    schedule 16.10.2016