Protovis против D3.js

TL; DR: есть ли у кого-нибудь опыт работы как с protovis, так и с D3.js, чтобы прояснить различия между ними?

Я играю с protovis в течение последних 2 недель, и пока все отлично. За исключением того, что сейчас я, кажется, натолкнулся на кирпичную стену с анимацией.

protovis: http://vis.stanford.edu/protovis/

Я хочу сделать довольно простую анимацию, но с protovis она кажется менее интуитивной - я начинаю думать, что protovis никогда не предназначался для анимации. Итак, я начал смотреть на D3.js:

http://mbostock.github.com/d3/ex/stack.html

Выглядит очень похоже, но:

  • Кажется более легким
  • Похоже, ориентирован на взаимодействие с другими элементами DOM, а также с SVG.
  • Кажется, ориентирован на добавление анимации

Кто-нибудь может осветить другие отличия?

Буду очень благодарен за любой вклад


person By Richard Powell    schedule 02.06.2011    source источник


Ответы (3)


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

  • Если Protovis предоставляет упрощенный уровень абстракции между заданными вами визуальными свойствами, D3 использует фактические спецификации CSS и DOM, поэтому вместо .width(10) или .fillStyle('#00C') вы должны использовать .style('width', 10) или .attr('fill', '#00C'). В этих примерах разница довольно тривиальна, но когда вы делаете что-то вроде рисования линии на изображении SVG, есть большие различия. В результате использование D3 может показаться немного более низким - у вас больше контроля, но вы должны быть хорошо знакомы с синтаксисом SVG, чтобы выполнять некоторые из вещей, которые Protovis делает намного проще.

  • Как вы заметили, Protovis отображается в SVG, а D3 может использовать другие части DOM. Это означает, что для визуализаций, не требующих визуальных элементов на основе SVG, вы можете использовать D3 даже с браузерами, не поддерживающими SVG. Это также означает, что гораздо проще интегрировать HTML и SVG в одну визуализацию, что действительно удобно для таких вещей, как работа с текстом (манипуляции с текстом и макетом в Protovis довольно слабы).

  • D3 изменяет или удаляет некоторые из основных утилит Protovis, таких как масштабирование и манипулирование данными. Меня неоднократно раздражало, что базовые утилиты, такие как pv.sum() или pv.mean(), не имеют эквивалентов D3, хотя некоторые, например .nest(), используются в двух библиотеках. Редактировать 01.10.12: D3 заполнил свои утилиты данных, но есть еще несколько, которые Protovis включает, а D3 нет, например pv.dict, pv.numerate и pv.repeat. Предположительно, они не были учтены, потому что считались менее полезными.

  • D3 предоставляет утилиты для асинхронных запросов. Когда я хочу этого в Protovis, мне обычно приходится использовать внешнюю библиотеку (например, jQuery).

  • Документация по D3 API почти полностью отсутствует по сравнению с довольно подробными документами для Protovis. Изменить (30.08.13): теперь у D3 есть полная и подробная документация по API на GitHub, поэтому этот момент больше не актуален.

  • Наконец, я мало что сделал с анимацией, но я думаю, что вы совершенно правы - D3 обеспечивает большую поддержку анимации, чем Protovis, особенно с точки зрения анимированных переходов. Protovis может повторно визуализировать часть или всю визуализацию по запросу, но не поддерживает пошаговую анимацию с ограниченной продолжительностью - вам придется кодировать все это вручную с помощью setInterval. D3, кажется, делает это гораздо более неотъемлемой частью библиотеки.

Изменить (7/12/11): похоже, есть новое существенное отличие - по состоянию на 28 июня 2011 года Protovis больше не находится в активной разработке, и команда Protovis вместо этого продвигает D3.js . Последний выпуск достаточно стабилен, так что это не должно помешать вам его использовать, но это определенно следует учитывать.

person nrabinowitz    schedule 02.06.2011
comment
Довольно правильно, за исключением третьего пункта. Вы можете встроить графику Protovis в произвольный HTML-элемент. - person Geoff; 03.06.2011
comment
@ Джефф - возможно, я преувеличил значение этого случая. Я хотел сказать, что D3 предназначен для работы с произвольными элементами, в то время как для этого с Protovis (AFAIK) требуется работа вне установленного API (например, путем установки свойства root $dom). Я смягчу этот момент. - person nrabinowitz; 03.06.2011
comment
@Jeff - Если подумать, я полностью отбрасываю этот пункт - почему-то я никогда не замечал свойство Panel#canvas. Спасибо за замечание. - person nrabinowitz; 03.06.2011
comment
Большое спасибо за подробный ответ - это было действительно полезно - person By Richard Powell; 05.06.2011
comment
с марта 2013 г. справочник по API для v3 D3 кажется полным и производит действительно хорошее впечатление. Кроме того, есть хорошая документация с множеством руководств и хороших примеров. - person Mobiletainment; 21.06.2013

Есть руководство, в котором подробно описаны различия между D3 и Protovis. Я согласен с описанием @nrabinowitz, но отмечу, что недавно мы добавили обширную документацию по API .

person mbostock    schedule 13.06.2011
comment
Да, я только вчера это заметил (очень признателен!). Обновлю свой ответ для потомков :). - person nrabinowitz; 17.06.2011

Существует недавняя статья авторов Protovis / d3.js, опубликованная в 2011 г. http://vis.stanford.edu/files/2011-D3-InfoVis.pdf в основном о d3.js, но содержит некоторые из причин, по которым они изменили определенные вещи на пути от Protovis к d3.js.

person pintxo    schedule 13.01.2012
comment
Я нашел эту статью полезной. Без какого-либо тестирования он дает мне представление о том, где он работает, а где несовершенен. Спасибо. - person Mike Gale; 14.11.2012