График работы js
Можете подсказать в какую сторону двигаться или как называется подобный график?
Как реализовать такой график на js?
Ответы (1 шт):
Автор решения: Дядя Вова
→ Ссылка
Самый простой способ - найти похожий пример здесь и поправить его под себя. Но график несложный в построении - можно самому написать.
Вам понадобятся:
- axes (ось координат)
- scaleTime (маштабирование времени на оси
- собственно привязка данных (рекомендую потренироваться на div'ах, чтобы понять, как в d3 работает связывание)
const plot = d3.select("#plot")
const items = [1, 2, 3, 4, 5]
plot
.selectAll("div") // выбираем div'ы( на самом деле в DOM их ещё нет)
.data(items).enter() // связываем данные с выбранными элементами (та самая "магия" d3)
.append("div") // здесь кол-во div'ов будет равно кол-ву эл-в в массиве items
.style("width", "100px")
.style("text-align", "center")
.style("border", "1px solid")
.style("background-color", item => item > 3 ? "green" : "blue")
.text(item => item)<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="plot" width="300" height="300"></div>