Добавление осей к визуализации
Другой способ улучшить график рассеяния - добавить ось x и ось y. D3 имеет два метода axisLeft() и axisBottom() для визуализации осей y и x соответственно. (Оси - это множественная форма оси). Ниже приведен пример создания оси x на основе xScale в предыдущих задачах: const xAxis = d3.axisBottom(xScale); Следующий шаг - отобразить ось на холсте SVG. Для этого вы можете использовать общий компонент SVG, элемент g . Группа g обозначает группу. В отличие от rect , circle и text , ось является прямой линией, когда она отображается. Потому что это простая форма, используя g works. Последний шаг - применить атрибут transform для размещения оси на холсте SVG в нужном месте. В противном случае линия будет отображаться вдоль границы холста SVG и не будет видна. SVG поддерживает различные типы transforms , но позиционирование оси требует translate . Когда он применяется к элементу g , он перемещает всю группу за и на указанные суммы. Вот пример:
const xAxis = d3.axisBottom (xScale);Вышеупомянутый код помещает ось x в нижнюю часть холста SVG. Затем он передается в качестве аргумента методу
svg.append ( "г")
.attr ("transform", "translate (0," + (h - padding) + ")")
.call (Xaxis);
call() . Ось y работает одинаково, за исключением того, что аргумент translate имеет вид (x, 0). Поскольку translate является строкой в методе attr() выше, вы можете использовать конкатенацию для включения значений переменных для своих аргументов.График рассеяния теперь имеет ось х. Создайте ось y в переменной с именем yAxis используя метод axisLeft() . Затем визуализируйте ось с помощью элемента g . Не забудьте использовать атрибут transform для перевода оси на количество единиц заполнения справа и 0 единиц вниз. Не забудьте call() ось.