Обновление происхождения перетаскивания / прокрутки после обновления данных с переходом в D3 -- javascript поле с участием charts поле с участием drag-and-drop поле с участием d3.js поле с участием transition пол Связанный проблема

Update drag/scroll origin after an update of the data with transition in D3


0
vote

проблема

русский

Я работаю на диаграмме с перетаскиванием, масштабированием и обновлениями. Это в основном работает, однако, после добавления новых данных позиция перетаскивания не обновляется.

Шаги для воспроизведения:

    .
  • см. Демо
  • Подождите несколько секунд, чтобы некоторые данные были добавлены к графику
  • Попробуйте перетаскивать график влево или вправо
  • График будет отодвинут обратно к началу, и с этого момента перетаскивание работает так, как он должен

Так что я думаю, при добавлении новых данных я как-то должен обновить происхождение перетаскивания. Но как? Пока я не смог найти какой-либо пример этого. Я также посмотрел на Код функциональности перетаскивания D3 , но мне все еще не понятно. То же самое происходит для увеличения масштабирования, я думаю, что это та же проблема.

Код и демо можно увидеть здесь: http://jsbin.com/irixag/1/edit

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

Английский оригинал

I work on a chart with dragging, zooming and updates. This mostly works, however, after adding new data, the dragging position does not update.

Steps to reproduce:

  • see the demo
  • wait some seconds so that some data is added to the graph
  • then try dragging the graph to the left or right
  • the graph will be pushed back to the beginning and from that point dragging works the way it should

So I guess, when adding new data, I somehow have to update the drag origin. But how? So far I was not able to find any example of that. I also looked at the code of the dragging functionality of D3, but it's still not clear to me. Same thing happens for the zooming, I guess it is the same problem there.

Code and demo can be seen here: http://jsbin.com/irixag/1/edit

Edit: If it is not clear what I mean, please tell me so that I can rephrase the question.

</div
              

Список ответов

1
 
vote
vote
Лучший ответ
 

Хорошо, я просеивал свой код и источник D3.js, и я заметил пару вещей.

Во-первых, суть моего решения - добавить

 <код> function update() {     ...     if (shiftRight) {         zoom.x(x); // You're missing this line         ...     }     ... }   

Вот почему:

Вы инициализируете горизонтальное сопротивление, используя <код> .x(x) call на <код> d3.behavior.zoom() объекта. Это выглядит хорошо, за исключением этого сопротивления; Обработчик Drop не предназначен для различного происхождения.

в основном, когда вы звоните <код> d3.behavior.zoom().x(x) вы объявляете, что прямо сейчас значение x - это начало. Теперь D3.js хранит это значение, поэтому, даже если вы перенесите окно прямо в петле анимации, Drag & AMP; Капли все еще почитают это оригинальное происхождение.

в <код> d3.behavior.zoom источника Есть три переменных интереса, <код> x0 , <код> x1 и <код> translate . <Код> x1 - это ссылка на текущее значение <Код> .x(x)0 Переменная, которую вы передали. <Код> .x(x)1 - это скопированное значение <код> .x(x)2 Когда вы изначально прошли его. <Код> .x(x)3 - это агрегатный перевод всех ваших перетаскивающих капель.

Теперь, удобно, вызывая <код> .x(x)4 сбрасывает все три из этих переменных, что означает, что перевод будет агрегирован только против текущего происхождения, и происхождение будет отражать ваше переключение.

 

Okay, I've been sifting through your code and the d3.js source and I've noticed a couple of things.

First, the gist of my solution is to add

function update() {     ...     if (shiftRight) {         zoom.x(x); // You're missing this line         ...     }     ... } 

Here's why:

You are initializing the horizontal drag and drop by using the .x(x) call on the d3.behavior.zoom() object. This looks fine, except this drag & drop handler is not designed for a varying origin.

Basically, when you call d3.behavior.zoom().x(x) you are declaring that right now the value of x is the origin. Now, d3.js stores this value, so even though you are shifting the window right in an animation loop, drag & drops will still honor that original origin.

In the d3.behavior.zoom source there are three variables of interest, x0, x1, and translate. x1 is a reference to the current value of the x variable you passed in. x0 is the copied value of x when you initially passed it in. translate is the aggregate translation of all your drag+drops combined.

Now, conveniently, calling zoom.x(x) resets all three of these variables, which means the translation will only be aggregated against the current origin, and the origin will reflect your shifting window.

</div
 
 

Связанный проблема

0  Нужна помощь в создании массива JavaScript от заданных объектов  ( Need help building a javascript array from given object values ) 
Это объект, который у меня есть. <код> var MyObject = { 'stop1-start': "0", 'stop1-color': "#0074a2", 'stop2-start': "32", 'stop2-color...

0  JavaScript цепи много функций  ( Javascript chaining many function ) 
newbe в JavaScript, Я 4 функции, скажем: <код> function funct1(){ //dosomething(); } function funct2(){ //dosomething(); } function funct3(){ ...

1  Удалить таблицу TR при сохранении AddClass  ( Remove table tr while maintaining addclass ) 
Хорошо, у меня есть таблица TR, которая удаляется, когда вы нажимаете кнопку. Я использую Animate.css и хотел бы добавить класс после того, как мой запрос AJA...

0  Как создать таблицу столбцов с несколькими сериями в Sapui5  ( How to create a column chart with multiple series in sapui5 ) 
Я пытаюсь создать столбчатую таблицу для моих данных <код> var oData = { Names:[ { store: "Gucci...

0  Google Map не отображает  ( Google map not displaying ) 
У меня есть карта Google, которая используется здесь: http://www.comehike.com/outdoors/birds/birds.php Теперь я вижу сообщения об ошибках .j для 1) Инициа...

0  в то время как цикл превышает каждый метод  ( While loop over takes the each method ) 
Я добавляю элемент на страницу, используя статический номер в соответствии с кликом пользователя. Таким образом, элемент имеет серийный номер в соответствии с...

0  Скрывая неупорядоченный список, когда у него нет элементов  ( Hiding an unordered list when it has no elements ) 
У меня есть проблема, которая кажется сначала, как общий язык No-Brainer и легкая задача. У меня есть плагин JavaScript на моей странице, который генерирует...

0  Почему Autoseizecolumn () Loop, похоже, замораживает сценарий Google Apps?  ( Why does an autoresizecolumn loop seem to freeze a google apps script ) 
Все, что я пытаюсь сделать, это изменить размер всеми колонны в электронной таблице. Это автономная электронная таблица. Я использую: <код> function format(...

-1  Что не так с этим кодом jQuery, его сумасшедшая? [закрыто]  ( What is wrong with this jquery code its driving my crazy ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...

0  Получите текущий пользователь SharePoint с JavaScript  ( Get sharepoint current userkey with javascript ) 
Я пытался получить текущие пользователи ключа ключа со многими другими способами, но ни один из них не работал, как хотел. Мне нужно получить текущий ключ Spu...

0  Как вы загружаете файл JavaScript в объем  ( How do you load a javascript file into a scope ) 
Я пытаюсь выяснить, как загрузить содержимое файла JavaScript в объем. Причина этого я хочу иметь возможность иметь возможности подключения и воспроизведения ...

0  OnClick = "Commentcheck ({{Meeting.people}})", ожидаемый идентификатор, строка или номер  ( Onclick authoritycheckmeeting people expected identifier string or num ) 
У меня возникли проблемы с отправкой <код> {{meeting.people}} Value на функцию JS. Код подписан на Сообщение об ошибке говорит: ожидаемый идентификатор, ст...

15  Как помешать PreservedRawingBuffer в Three.js?  ( How to toggle preservedrawingbuffer in three js ) 
В принципе, я хочу установку, где я мог пойти к PreservedRawingBuffer = True, оказывайте сцену один раз, возьмите скриншот и вернитесь. Тем не менее, это пред...

2  Fullcalendar сейчас () индикатор позиционируется неправильно  ( Fullcalendar now indicator positioned wrongly ) 
в Fullcalendar, при настройке параметров Mintime и maxtime ныне () индикаторы не расположены должным образом. У меня есть jsfiddle , чтобы пока...

1  Функциональность ломтики массива JavaScript на картах JavaScript  ( Javascript array slice functionality in javascript maps ) 
в массивах JavaScript у нас есть один метод под названием Slice, который возвращает неглубокую копию части массива. Можно ли сделать то же самое в картах JS. ...