Сравнение между Д3.js и диаграмма.js (только для диаграмм)

Я использовал диаграмму.js в моих проектах несколько раз, но я никогда не использовал d3.js. Многие говорят, что d3.js-лучшая платформа javascript для диаграмм, но никто из них не может объяснить, почему, особенно когда я хочу сравнение с диаграммой.js.

Я нашел это:http://www.fusioncharts.com/javascript-charting-comparison/ но это не то, что я искал.

кто-нибудь знает о сравнении этих фреймворков с точки зрения удобство использования и производительность (только для диаграмм)?

3 ответов


d3.js Это не "библиотека диаграмм". это библиотека для создания и управления SVG / HTML. Он предоставляет инструменты для визуализации и управления данными. Хотя вы можете использовать его для создания обычных диаграмм (bar, line, pie и т. д...) он способен на гораздо большее. Конечно, с этим "способным на многое" приходит более крутая кривая обучения. Есть много обычных библиотек диаграмм, построенных поверх d3.js - nvd3.js, dimple.js, dc.js если вы хотите пойти этот маршрут.

Я не знаком с Chart.js но быстрый взгляд на веб-сайт говорит мне, что это больше похоже на библиотеку графиков мельницы. Он поддерживает 6 основных типов диаграмм, и вы не собираетесь делать материал как этой С это. но API выглядит просто, и я уверен, что он прост в использовании.

кроме этого, наиболее очевидным различием между ними является это Chart.js - это холст, а d3.js в основном о SVG. (Теперь я говорю главным образом, потому что d3.js может манипулировать всеми типами HTML-элементов так вы даже можете использовать его, чтобы помочь вам рисовать на холсте.) В целом canvas будет выполнять SVG для большого количества элементов (я говорю очень большие - тысячи точек, линий и т. д.)...). SVG, с другой стороны, легче манипулировать и взаимодействовать. С SVG каждая точка, линия и т. д. становится частью DOM - если вы хотите, чтобы точка была зеленой сейчас, просто измените ее. С canvas его статический рисунок, который должен был быть перерисован, чтобы внести какие - либо изменения-конечно, он рисует так быстро, что вы обычно никогда не заметите. Вот!--32-->хорошее чтение из Microsoft.


обновлено 2016

общее правило такое:

d3.js - отлично подходит для интерактивных визуализаций

chart.js - отлично подходит для быстрого и простого

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


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

  1. c3, который основан на d3 и поэтому использует SVG
  2. диаграмма.js, который использует canvas

диаграммы загружаются внутри компонента WebView внутри собственного приложения, и все данные (включая библиотеку JS) являются локальными, поэтому не замедляются из-за HTTP-запросов. Чтобы увеличить производительность еще больше, я дополнительно помещаю все в один файл.

Я загрузил 4 диаграммы (линия, Бар, пирог, линия/Бар комбо) вместе около 500 точек данных.

мое измерение времени исключило фактическую загрузку html-страницы. Я измерил форму в тот момент, когда начал использовать код библиотеки диаграмм до конца рендеринга. Вся анимация графика была отключена.

C3 занял около 1500-1800 МС на современном Android и IPhone устройств. iPhone работает примерно на 100 мс лучше, чем Android.

диаграмма.js занял около 400-800ms. Android выполнен примерно на 300 мс лучше, чем iPhone.

неудивительно, SVG работает медленнее. В зависимости от вашего варианта использования, может быть слишком медленно.

на настольном компьютере рендеринг в c3 был около 150-200ms и диаграмм.js вокруг 80-100ms. Запуск того же теста в эмуляторе Android и iPhone имел тот же результат, что и на рабочем столе. Таким образом, замедление на мобильных устройствах определенно из-за ограничений оборудования/обработки.

надеюсь, что это поможет