in ui/src/Map.tsx [163:217]
public drawRobotsOnMap(xRange: any, yRange: any, svg: any, robots: Robot[]) {
const robotElements = svg.selectAll("g.robot")
.data(robots, (d: Robot) => {
return d.id
});
// existing robot elements
const robotCircles = robotElements.select("circle.robotCircle");
robotCircles
.transition()
.duration(this.positionUpdateIntervalInMs)
.attr("class", "robotCircle")
.attr("pointer-events", "none")
.attr("r", (d: Robot) => this.getRobotSize(d.id))
.attr("cx", (d: Robot) => xRange(d.telemetry.position.x))
.attr("cy", (d: Robot) => yRange(d.telemetry.position.y))
.style("fill", (d: Robot) => this.getRobotColor(d.telemetry.status.toString()));
const robotLabels = robotElements.select("text.robotLabel");
robotLabels.text((d: Robot) => d.id)
.transition()
.duration(this.positionUpdateIntervalInMs)
.attr("pointer-events", "none")
.attr("class", "robotLabel")
.attr("x", (d: Robot) => xRange(d.telemetry.position.x) + (this.getRobotSize(d.id) / 2))
.attr("y", (d: Robot) => yRange(d.telemetry.position.y) - this.getRobotSize(d.id));
// new robot elements
const robotEntry = robotElements
.enter()
.append("g")
.attr("class", "robot");
robotEntry.append("circle")
.attr("pointer-events", "none")
.attr("class", "robotCircle")
.attr("r", (d: Robot) => this.getRobotSize(d.id))
.attr("cx", (d: Robot) => xRange(d.telemetry.position.x))
.attr("cy", (d: Robot) => yRange(d.telemetry.position.y))
.style("fill", (d: Robot) => this.getRobotColor(d.telemetry.status.toString()))
robotEntry.append("text")
.text((d: Robot) => d.id)
.attr("pointer-events", "none")
.attr("class", "robotLabel")
.attr("x", (d: Robot) => xRange(d.telemetry.position.x) + (this.getRobotSize(d.id) / 2))
.attr("y", (d: Robot) => yRange(d.telemetry.position.y) - this.getRobotSize(d.id))
// remove old robot elements
robotElements.exit().remove();
return robotElements;
}