Javascript D3旋转球体：如何旋转分划（网格）？

我使用D3在正交投影上对一些JSON数据进行交互式可视化。用户应该能够通过拖动鼠标/轨迹板来旋转地球

使用下面的代码，我可以成功地旋转这些点，但是分划仍然是静态的

我试着在下面制作一个工作片段，但它在嵌入式预览器上的显示方式与在我的机器上不同；任何关于如何让这项工作的提示也非常感谢

leeroyjenkins=函数（）{
风险值数据=[{
“纬度”：0，
“经度”：0，
“震级”：“1.0”
}, {
“纬度”：10，
“经度”：10，
“震级”：“2.0”
}, {
“纬度”：20，
“经度”：20，
“震级”：“3.0”
}, {
“纬度”：30，
“经度”：30度，
“震级”：“4.0”
}, {
“纬度”：40，
“经度”：40，
“震级”：“5.0”
}, ]
主要（数据）；
};
var main=功能（点）{
可变宽度=600，
高度=600，
//旋转=[10，-10]，
时间=日期。现在（）；
变量球体={
类型：“球体”
};
var graticule=d3.geo.graticule（）；
var projection=d3.geo.orthographic（）
.比例尺（250）
.translate（[宽度/2，高度/2]）
.clipAngle（90）；
var pointpath=函数（d，r）{
var pr=d3.geo.path（）.projection（projection）.pointRadius（r）；
返回pr({
键入：“点”，
坐标：[经度，纬度]
})
}
var path=d3.geo.path（）
.投影（投影）；
varλ=d3.刻度.线性（）
.domain（[0，宽度]）
.范围（[-180180]）；
varφ=d3.刻度.线性（）
.domain（[0，高度]）
.范围（[90，-90]）；
var drag=d3.behavior.drag（）.origin（函数（）{
var r=投影。旋转（）；
返回{
x：λ倒置（r[0]），
y：φ.内底（r[1]）
};
})
.on（“拖动”，函数（）{
投影旋转（[λ（d3.event.x），φ（d3.event.y）]；
svg.selectAll（“path.point”）.attr（“d”，函数（d）{
返回点路径（d，d.幅值*2.5）；
});
svg.selectAll（“path.gracile”）.attr（“d”，path）；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
追加（“路径”）
.基准面（分划）
.attr（“类别”、“分划”）
.attr（“d”，路径）；
var point=svg.selectAll（“path.point”）.data（点）；
点。输入（）
.append（“路径”）
.attr（“类”、“点”）
.attr（“d”，函数（d）{
返回点路径（d，0）
})
.transition（）
.延迟（功能（d，i）{
返回i*200；
})
.持续时间（200）
.attr（“d”，函数（d）{
返回点路径（d，d.幅值*2.5）
});
调用（拖动）；
}//末端总管
leeroyjenkins（）
正文{
背景色：#DDD；
颜色：#555；
}
国家{
填充：#ccc；
冲程：#fff；
笔划宽度：.5px；
笔划线条连接：圆形；
}
分划{
填充：无；
冲程：#EEE；
笔划不透明度：.3；
笔划宽度：.5px；
}
分划轮廓{
冲程：#333；
笔画不透明度：1；
笔划宽度：1.5px；
}
分区工具提示{
位置：绝对位置；
文本对齐：居中；
宽度：240px；
高度：60px；
填充：2px；
字体：12px无衬线；
背景：#FFF；
边界：0px；
边界半径：8px；
/*指针事件：无*/
}
头衔{
显示：内联块；
字体大小：48px；
线高：90px；
文本对齐：居中；
}
路径点{
笔画：红色；
填充物：红色；
}
我相信我在问题中发布了正确的代码，但是我与预览器的问题意味着我没有注意到它正在工作

无论如何，我遇到问题的部分是：

svg.selectAll("path.graticule").attr("d", path);

我把它放在
返回点路径下的行上。只需将代码放在下面的行上就可以了。
我相信我在问题中发布了正确的代码，但是我与预览器的问题意味着我没有注意到它正在工作

无论如何，我遇到问题的部分是：

svg.selectAll("path.graticule").attr("d", path);

我把它放在
返回点路径下的行上。只需将代码放在下面的行上，就可以实现此目的