Javascript D3.v4投影转换不工作

我最近才开始编写代码，这是我第一次发帖，所以对任何违反协议的行为表示歉意-P

我试图从这个Mike Bostock bl.ock复制投影变换

但是在d3.v4中。我可以执行过渡，但中间没有动画。我认为这与我执行ProjectionTween函数的方式有关，或者可能与Update选择svg的方式有关，但我似乎无法让它以其他方式工作

任何帮助都将不胜感激

//选项，在此处插入投影
变量选项=[
{名称：“墨卡托”，投影：d3.geoMercator（）}，
{name:“Hammer”，投影：d3.geoHammer（）}，
{名称：“ConicEqual”，投影：d3.geoConicEqualArea（）}，
{name:“ConicEqui”，投影：d3.geoconicequiditant（）}，
{name:“ConicConformal”，投影：d3.geoConicConformal（）}，
{name:“Ginzburg8”，投影：d3.geoGinzburg8（）}，
{名称：“Laskowski”，投影：d3.geoLaskowski（）}，
{name:“Times”，投影：d3.geoTimes（）}，
{name:“LaGrange”，投影：d3.geoLagrange（）}
];
选项。forEach（函数（o）{
o、 投影。旋转（[0,0]）。中心（[0,0]）；
});
var间隔=设置间隔（循环，1500），
i=0，
n=选项。长度-1；
var c=document.getElementById（'container'）；
变量宽度=c.偏移网络宽度；
变量高度=宽度/2；
var div=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
变量分划=d3.地理分划（）；
变量菜单=d3。选择（“投影菜单”）
.关于（“变更”，变更）；
菜单。选择全部（“选项”）
.数据（选项）
.enter（）.append（“选项”）
.text（函数（d）{返回d.name；}）；
设置（宽度、高度）；
功能设置（宽度、高度）{
projection=选项[i]。projection//N.B.第1.1节中的地理五边形+
.translate（[（宽度/2），（高度/2）]）
.比例（宽度/2/数学PI）；
//path=d3.geo.path（）.projection（projection）；
路径=d3.geoPath（）.projection（projection）；
svg=d3。选择（#容器”）。追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）；
g=svg.append（“g”）；
g、 附加（“路径”）
.基准面（分划）
.attr（“类别”、“分划”）
.attr（“d”，路径）；
g、 附加（“路径”）
.datum（{type:“Sphere”}）
.attr（“类”、“球体”）
.attr（“d”，路径）
.attr（“填充”，“#f1f1”）
.attr（“笔划”、“黑色”）
.attr（“不透明度”，0.3）；
}
d3.队列（）
.defer（d3.json，“world-50m.v1.json”）
.等待（准备好）；
功能就绪（错误，世界）{
var countries=topojson.feature（world，world.objects.countries）.features；
topo=国家；
绘制（地形图）；
}
功能图（topo）{
var country=g.selectAll（“.country”）.数据（拓扑）；
country.enter（）插入（“路径”）
.attr（“类别”、“国家”）
.attr（“d”，路径）
.样式（“填充”、“黑色”）；
}
//循环/间隔/选项/更新
函数循环（）{
var j=Math.floor（Math.random（）*n）；
属性（“selectedIndex”，i=j+（j>=i））；
更新（选项[i]）；
}
函数更改（）{
间隔时间；
更新（选项[this.selectedIndex]）；
}
功能更新（选项）{
svg.selectAll（“路径”）.transition（）
.持续时间（750）
.attrween（“d”，projectionTween（projection，projection=option.projection））；
}
函数projectionTween（projection0，projection1）{
返回函数（d）{
var t=0；
projection=选项[i]。projection//N.B.第1.1节中的地理五边形+
.translate（[（宽度/2），（高度/2）]）
.比例（宽度/2/数学PI）；
//path=d3.geo.path（）.projection（projection）；
路径=d3.geoPath（）.projection（projection）；
功能项目（λ，φ）{
λ*=180/Math.PI，φ*=180/Math.PI；
var p0=投影0（[λ，φ]），p1=投影1（[λ，φ]）；
返回[（1-t）*p0[0]+t*p1[0]，（1-t）*-p0[1]+t*-p1[1]]；
}
返回函数{
t=uu；
返回路径（d）；
};
};
}

.country{
填充物：灰色；
笔划宽度：0.1px；
}
.分划{
填充：无；
笔画：灰色；
笔划宽度：0.5px；
笔划不透明度：0.3；
}
#容器{
利润率：10px10%；
边框：2倍实心#000；
边界半径：5px；
身高：100%；
溢出：隐藏；
背景：无；
}

---

我想出来了！我误解了projectionTween函数是如何工作的。我基本上忘记了将它从v3转换到v4。因此，代码：

var projection=d3.geo.projection（项目） .比额表（1） .翻译（[宽度/2，高度/2]）

变成：

var预测=d3.地质预测（项目） .比额表（1） .翻译（[宽度/2，高度/2]）

---

希望这对别人有帮助

我确实设法转换了它，但我认为“projectionTween”有点问题，似乎数据表现得很疯狂是的，上面的代码应该在投影之间切换很好。。。但它是以一种非动画的方式实现的。Mike最初的例子更流畅、更吸引人。