Google maps 行未正确显示d3.js geo和google地图

我需要使用svg绘制一条道路。我将从谷歌地图上获取道路的坐标。通过坐标，我绘制了D3的比例图，并绘制了我们的道路。但由于某些原因，它被错误地显示，不知何故被颠倒了。我做错了什么？ 谢谢你的帮助

谷歌地图多段线

我的svg gen 3d.js

代码在这里

let width=250；
让高度=375；
让json={
“类型”：“行字符串”，
“坐标”：[[48.90532814533834,24.680317370130183]，
[48.883320688958634, 24.637144533826472],
[48.882530497570265, 24.636028734876277],
[48.88190962414936, 24.638088671399714],
[48.871002260895736, 24.66945519346757],
[48.868969814521975, 24.674519204087687],
[48.86778418267773, 24.67640747923417],
[48.867050206029084, 24.67743744749589],
[48.86637267956708, 24.67795243162675],
[48.86546929668142, 24.678810738511515],
[48.86445297144161, 24.679583214707804],
[48.8628155151407, 24.680269860215617],
[48.86066980165004, 24.681128167100383],
[48.85801576560714, 24.682072304673625],
[48.85575690067917, 24.683016442246867],
[48.85479685221879, 24.68370308775468],
[48.85231193541426, 24.686020516343547],
[48.850448166869896, 24.689110421128703],
[48.84813247900213, 24.69640602964921],
[48.84711580171843, 24.70438828367753],
[48.846438005394916, 24.70516075987382],
[48.845590747089275, 24.705246590562297],
[48.83384441590116, 24.70023211348473],
[48.8291415885976, 24.698462478144393],
[48.82654238705405, 24.696230880244002],
[48.82512972097189, 24.695115081293807],
[48.82377352406793, 24.694428435785994],
[48.822756352305085, 24.692969314081893],
[48.82083497153837, 24.689965239985213],
[48.81913957439901, 24.68850611828111],
[48.81716153859056, 24.687476150019393],
[48.81620075017718, 24.686446181757674],
[48.81443898628063, 24.684729567988143],
[48.80986069828892, 24.68155383251451],
[48.80717570530815, 24.679665557368025],
[48.80381219546943, 24.67880725048326],
[48.77989284642209, 24.67039901058888],
[48.777354631787716, 24.669543351419634],
[48.77611026798696, 24.668513383157915],
[48.77509212920691, 24.667483414896196],
[48.773734578713096, 24.66688260007686],
[48.772886091013035, 24.666367615946],
[48.77158504868879, 24.66465100217647],
[48.767568574926294, 24.663191880472368],
[48.76158563393699, 24.657331572784756],
[48.75106082711519, 24.651838408722256],
[48.74224825684646, 24.646860228790615],
[48.740635107152315, 24.646087752594326],
[48.73868227772552, 24.646345244659756],
[48.73732374294287, 24.646860228790615],
[48.73579534742594, 24.647546874298428],
[48.732652406087446, 24.646558163473628],
[48.72767033487528, 24.643897412130855],
[48.71895052242447, 24.638833401510738],
[48.71538289067956, 24.637460110495113],
[48.7107955637972, 24.632911084005855],
[48.70043006310887, 24.622439740011714],
[48.68751268172252, 24.61153924257519],
[48.6790819349596, 24.60447667336598],
[48.676644982797136, 24.603790027858167],
[48.67511474327954, 24.603360874415785],
[48.67392452485299, 24.603275043727308],
[48.67262092002776, 24.602588398219496],
[48.6650820219688, 24.597181064845472]]
};
//创建单位投影。
设projection=d3.geo.mercator（）
.比额表（1）
.翻译（[0,0]）；
//创建一个路径生成器。
让path=d3.geo.path（）
.投影（投影）；
//计算感兴趣特征的边界，然后导出缩放和平移。
设b=path.bounds（json），
s=.95/数学最大值（（b[1][0]-b[0][0]）/宽度，（b[1][1]-b[0][1]）/高度），
t=[（宽度-s*（b[1][0]+b[0][0]）/2，（高度-s*（b[1][1]+b[0][1]）/2]；
//更新投影以使用计算的缩放和平移。
投影、标度（s）、平移（t）；
让svg=d3。选择（“映射”）。追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
追加（“路径”）
.datum（json）
.attr（“类别”、“分划”）
.attr（“d”，路径）
分划{
填充：无；
冲程：#ff646b；
笔画不透明度：.5；
笔画宽度：5px；
}

线
您没有提到您的坐标来自何处，但我怀疑它们是基于GIS（x，y，z）格式的，所以顺序是
[经度，纬度]
。这将导致图像“旋转”--如果反转x/y值，应该会有所帮助。关于这些不同坐标系（导航与绘图）的演变，有一个很好的讨论

此外，正在生成的路径看起来是垂直“翻转”的。我不能告诉你我做了多少次，因为页面的坐标系不是我们大多数人所期望的。左上角为（0，0），y值在页面中向下增加。最直观的方法（对我来说）是反转y轴的输出范围——一种方法如下：

var yScale = d3.scale.linear()
    .domain([minY, maxY])
    .range([height, 0]);

这样，最小y坐标（即纬度，在您的情况下）被映射到SVG区域的底部（“高度”变量），而最大值被映射到0（屏幕顶部）。
看起来您的lon/lat坐标是向后的——请注意，在屏幕坐标中，y从页面顶部向下增加！史蒂文-谢谢你！您可以详细说明材质的描述或链接。感谢you@tetrafishka，很高兴我能帮上忙——如果这能解决你的问题，你介意接受答案吗？