Comments 21
Я специально вначале написал, что «D3 это не простая библиотека, где вызов функции с нужной конфигурацией строит график. D3 это набор инструментов для визуализации данных.»
Для совсем простых графиков D3 слишком исчерпывающее решение. Но чем сложнее должна быть визулизация, тем легче писать ее на D3. Посмотрите сколько всего интересного можно сделать: https://github.com/d3/d3/wiki/Gallery, https://datalaboratory.ru/.
Описал как сделать график с заливкой.
http://jsbin.com/wetiqiyare/1/edit?html,js,output
Вы знаете, проще найти готовый, чем спрашивать. Вот примерно тут живут примеры https://bl.ocks.org/mbostock (это конкретно Майк, сам автор). Там диаграмм — десятки в самых разных видах.
Просто линейный график — это path в SVG, он прост (и выбор тут скорее между вариантами интерполяции, т.е. строить ли ломаную, или сглаживать ее сплайном, и т.п.).
А раскрашенные диапазоны — это просто прямоугольники. Все что вам нужно — это определить их число, и вычислить размеры (с учетом масштаба, через scale), и цвета.
Ну и понять, в первую очередь, какой у вас вообще масштаб, т.е. не логарифмический ли он, например. А дальше все прямолинейно. Причем заметьте, что scale умеет масштабировать и такие экзотические вещи, например, как цвета — т.е. вы можете создать функцию, которая отображает диапазон [0,1] на [красный, зеленый]. В любой цветовой модели, ну почти. Так что цвет раскраски тоже можно рассчитать, без усилий.
Любую смену мажорных версий сложно адаптировать.
Я тоже столкнулся с этим, начиная писать инфографику на 3 версии и мучительно переводя впоследствии её на 4.
Ну, тут все же вышел перебор. Посмотрите, из любопытства, на специализированные фреймворки построения диаграмм на базе d3. Многие из них, такие как c3, nvd3, и другие (я смотрел таких с десяток наверное) конкретно застряли на v3, и не могут уже годы перейти на v4. Ну т.е. понятно что это не просто — но об этом плохо подумали.
70 тысяч звездочек на гитхабе
И всего лишь 2 issue. Вот так действительно пример хорошо сделанной библиотеки.
Число issue — совсем не показатель качества. Может, люди просто не знают, куда слать репорты. Или у автора есть бот, автоматически закрывающий все тикеты по кд.
Судя по таким комментариям-копипастам, я склоняюсь к версии про бота.
Вы о чем? Откройте d3-scale, это отдельный модуль. 22 открытых, 69 закрытых. Нормальное такое немаленькое число задач. В других — аналогично, уж поверьте.
Добавить отметки на осях позволяет модуль d3-axis. Буквально в две строчки.
Ну, это вы преувеличили :) На самом деле, это стандартный случай. Нестандартный, как обычно, может вылиться в любое число строк кода.
Например, представьте, что у вас по оси X текстовые метки. Месяцы там, или категории чего-либо. И они очень часто не влезают в ту ширину, которая им отводится между тиками. И если автор d3-axis это не предусмотрел, то… вам не повезло.
Хотя, ради объективности, надо сказать, что если элементы, из которых формируется ось, т.е. тики, текст к ним, и пр., спроектированы хорошо, то есть снабжены классами, то вы можете все же написать функцию, которая, например, повернет надписи вертикально, подвинет их по горизонтали или вертикали, лесенкой, и сделает много чего еще.
Можете подсказать ещё каких-нибудь обучающих/вводных материалов для начала работы с d3?
Просто о D3.js