给图片根据坐标定位添加标记

Question

如上图：
比如客厅有个大电视，根据坐标给电视上方加个叹号，并且可以根据接口实时显示电视的温度，然后卧室有个台灯，也可以根据坐标给灯的上方添加一个叹号，显示亮度，温度等

这个坐标是后台返回的，前端要做的就是根据坐标定位，并且实时显示数据，根据背景图的大小自适应，以前用定位，后来用canvas，效果都不好，请问有没有什么技术可以丝滑的做到这样的需求

d3可以根据坐标定位吗？

Answer 1

定位的实现是数学上的，除了定位点的坐标(x, y)，还需要给出视图的范围，也就是最大、最小x，最大、最小y。这样，定位点在视图中的位置就是 position = (x - minx) / (maxx - minx)，得到的是一个百分数，使用position定位就可以直接使用这个，如果需要转成具体像素值，再使用position * 当前视图width就可以计算出来。同理，y也是这样计算