Javascript 使用openstreet和d3.js无法正确渲染数据

我试图用d3.js的开放式街道谷歌地图上的json数据显示加的夫市的位置，在json数据中我有纬度和经度，我使用d3.js显示特定位置的图像，并使用圆弧连接它们。我想创建一些东西，就像我知道它不使用d3一样，但是我想得到d3中渲染的数据点

我正在使用来自的参考代码

到目前为止我所尝试的是

我正在努力解决的问题是：

当地图加载了所有城市数据（如第10行的script.js中的数据）时，如果替换代码以使用cardiff.json数据，而不是cardiff1.json数据，浏览器将挂起。 cardiff1.json包含城市的少量数据，而cardiff.json包含1498条记录周围城市的所有数据

我使用700px 400px div来显示数据，并将svg的视口区域设置为99999 X 99999。因此，仅显示0,0到9999999之间的点，即从点顶部、左侧到右侧和底部的几段距离，您可以拖动地图查看，但左侧和顶部的点不会绘制，因为svg在视图端口中滞后

在放大和缩小时，某些位置会被剪切并部分显示

请在这方面或任何建议上帮助我，提前谢谢