С установленными весами пришло время снова отобразить график рассеяния. Масштабы похожи на функции обработки, которые превращают исходные данные x и y в значения, которые соответствуют и визуализируются правильно на холсте SVG. Они хранят данные в области построения экрана. Вы устанавливаете значения атрибута координат для формы SVG с помощью функции масштабирования. Сюда входят атрибуты x и y для rect или text элементов, или cx и cy для circles . Вот пример:
форма .attr ("x", (d) => xScale (d [0]))
Масштабы устанавливают атрибуты координат формы, чтобы поместить точки данных на холст SVG. Вам не нужно применять шкалы, когда вы показываете фактическое значение данных, например, в методе text() для всплывающей подсказки или метки.
Используйте xScale и yScale чтобы yScalecircle и text фигуры на холст SVG. Для circles применяйте шкалы для установки атрибутов cx и cy . Дайте им радиус 5 единиц. Для text элементов примените шкалы для установки атрибутов x и y . Этикетки должны быть смещены справа от точек. Для этого добавьте 10 единиц к значению данных x, прежде чем передавать его в xScale .
⌛
Your code should have 10 circle elements.
⌛
The first circle element should have a cx value of approximately 91 and a cy value of approximately 368 after applying the scales. It should also have an r value of 5.
⌛
The second circle element should have a cx value of approximately 159 and a cy value of approximately 181 after applying the scales. It should also have an r value of 5.
⌛
The third circle element should have a cx value of approximately 340 and a cy value of approximately 329 after applying the scales. It should also have an r value of 5.
⌛
The fourth circle element should have a cx value of approximately 131 and a cy value of approximately 60 after applying the scales. It should also have an r value of 5.
⌛
The fifth circle element should have a cx value of approximately 440 and a cy value of approximately 237 after applying the scales. It should also have an r value of 5.
⌛
The sixth circle element should have a cx value of approximately 271 and a cy value of approximately 306 after applying the scales. It should also have an r value of 5.
⌛
The seventh circle element should have a cx value of approximately 361 and a cy value of approximately 351 after applying the scales. It should also have an r value of 5.
⌛
The eighth circle element should have a cx value of approximately 261 and a cy value of approximately 132 after applying the scales. It should also have an r value of 5.
⌛
The ninth circle element should have a cx value of approximately 131 and a cy value of approximately 144 after applying the scales. It should also have an r value of 5.
⌛
The tenth circle element should have a cx value of approximately 79 and a cy value of approximately 326 after applying the scales. It should also have an r value of 5.
⌛
Your code should have 10 text elements.
⌛
The first label should have an x value of approximately 100 and a y value of approximately 368 after applying the scales.
⌛
The second label should have an x value of approximately 168 and a y value of approximately 181 after applying the scales.
⌛
The third label should have an x value of approximately 350 and a y value of approximately 329 after applying the scales.
⌛
The fourth label should have an x value of approximately 141 and a y value of approximately 60 after applying the scales.
⌛
The fifth label should have an x value of approximately 449 and a y value of approximately 237 after applying the scales.
⌛
The sixth label should have an x value of approximately 280 and a y value of approximately 306 after applying the scales.
⌛
The seventh label should have an x value of approximately 370 and a y value of approximately 351 after applying the scales.
⌛
The eighth label should have an x value of approximately 270 and a y value of approximately 132 after applying the scales.
⌛
The ninth label should have an x value of approximately 140 and a y value of approximately 144 after applying the scales.
⌛
The tenth label should have an x value of approximately 88 and a y value of approximately 326 after applying the scales.