D3.js 如何添加arc d3 v4贴图

在另一个用户的建议下，我决定用v4重做我的地图。考虑到这一点，我从一张简单的地图开始，一直在阅读，但是我如何将其应用到地图上呢

var arc = d3.arc();
arc({
   innerRadius: 0,
   outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

---

plnkr:

我让你在上一个问题中一直挂着你的评论问题，所以这里有一个你想要的快速尝试。初始地图绘制来自

d3

docs示例。绘制完后，我添加了一条线，其中有一条从中借用的自定义圆弧。然后，我使用带有“stroke dasharray”的

attrTween

来设置直线增长的动画，并在该过渡结束时使用另一个过渡来增长圆

运行代码：

.中风{
填充：无；
行程：#000；
笔画宽度：3px；
}
.填充{
填充：#fff；
}
.分划{
填充：无；
行程：777；
笔划宽度：0.5px；
笔划不透明度：0.5；
}
.土地{
填充：#222；
}
.边界{
填充：无；
冲程：#fff；
笔划宽度：0.5px；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var projection=d3.geoMercator（）
.scale（（宽度-3）/（2*Math.PI））
.翻译（[宽度/2，高度/2]）；
var path=d3.geoPath（）
.投影（投影）；
变量分划=d3.地理分划（）；
svg.append（“defs”）.append（“path”）
.基准({
类型：“球体”
})
.attr（“id”、“球体”）
.attr（“d”，路径）；
追加（“使用”）
.attr（“类”、“笔划”）
.attr（“xlink:href”，“#sphere”）；
追加（“使用”）
.attr（“类”、“填充”）
.attr（“xlink:href”，“#sphere”）；
追加（“路径”）
.基准面（分划）
.attr（“类别”、“分划”）
.attr（“d”，路径）；
d3.json（“https://rawgit.com/d3/d3-geo/master/test/data/world-50m.json，函数（错误，世界）{
如果（错误）抛出错误；
svg.insert（“路径”，“分划”）
.datum（topojson.feature（world，world.objects.land））
.attr（“类别”、“土地”）
.attr（“d”，路径）；
svg.insert（“路径”，“分划”）
.datum（topojson.mesh（world，world.objects.countries，function）（a，b）{
返回a！==b；
}))
.attr（“类别”、“边界”）
.attr（“d”，路径）；
变量坐标=[
投影（[-74,40]），//纽约
投影（[-43，-22]）//rio 22.9068°S，43.1729°W
];
var line=svg.append（“路径”）
.基准（坐标）
.attr（“d”，函数（c）{
变量d={
资料来源：c[0]，
目标：c[1]
};
var dx=d.目标[0]-d.源[0]，
dy=d.目标[1]-d.源[1]，
dr=Math.sqrt（dx*dx+dy*dy）；
返回“M”+d.source[0]+”，“+d.source[1]+“A”+dr+”，“+dr+
“0,1”+d.target[0]+”，“+d.target[1]；
})
.风格（“笔划”、“钢蓝”）
.样式（“笔划宽度”，5）
.style（“填充”、“无”）
.transition（）
.持续时间（5000）
.attrween（“笔划数组”，函数（）{
var len=this.getTotalLength（）；
返回函数（t）{
返回值（d3插值（“0，+len，len+”，0”））（t）
};
})
.on（'end'，函数（d）{
var c=坐标[1]；
append（'circle'）
.attr（'cx'，c[0]）
.attr（'cy'，c[1]）
.attr（'r'，0）
.style（'填充'，'红色'）
.style（'fill-opacity'，'0.5'）
.transition（）
.期限（2000年）
.attr（'r'，50）
.on（'end'，函数（d）{
d3.选择（本）
.transition（）
.期限（2000年）
.attr（'r'，10）；
});
});
});

在上一个问题中，我让你一直挂在评论问题上，所以这里有一个你想要的快速尝试。初始地图绘制来自

d3

docs示例。绘制完后，我添加了一条线，其中有一条从中借用的自定义圆弧。然后，我使用带有“stroke dasharray”的

attrTween

来设置直线增长的动画，并在该过渡结束时使用另一个过渡来增长圆

运行代码：

.中风{
填充：无；
行程：#000；
笔画宽度：3px；
}
.填充{
填充：#fff；
}
.分划{
填充：无；
行程：777；
笔划宽度：0.5px；
笔划不透明度：0.5；
}
.土地{
填充：#222；
}
.边界{
填充：无；
冲程：#fff；
笔划宽度：0.5px；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var projection=d3.geoMercator（）
.scale（（宽度-3）/（2*Math.PI））
.翻译（[宽度/2，高度/2]）；
var path=d3.geoPath（）
.投影（投影）；
变量分划=d3.地理分划（）；
svg.append（“defs”）.append（“path”）
.基准({
类型：“球体”
})
.attr（“id”、“球体”）
.attr（“d”，路径）；
追加（“使用”）
.attr（“类”、“笔划”）
.attr（“xlink:href”，“#sphere”）；
追加（“使用”）
.attr（“类”、“填充”）
.attr（“xlink:href”，“#sphere”）；
追加（“路径”）
.基准面（分划）
.attr（“类别”、“分划”）
.attr（“d”，路径）；
d3.json（“https://rawgit.com/d3/d3-geo/master/test/data/world-50m.json，函数（错误，世界）{
如果（错误）抛出错误；
svg.insert（“路径”，“分划”）
.datum（topojson.feature（world，world.objects.land））
.attr（“类别”、“土地”）
.attr（“d”，路径）；
svg.insert（“路径”，“分划”）
.datum（topojson.mesh（world，world.objects.countries，function）（a，b）{
返回a！==b；
}))
.attr（“类别”、“边界”）
.attr（“d”，路径）；
变量坐标=[
投影（[-74,40]），//纽约
投影（[-43，-22]）//rio 22.9068°S，43.1729°W
];
var line=svg.append（“路径”）
.基准（坐标）
.attr（“d”，函数（c）{
变量d={
资料来源：c[0]，
目标：c[1]
};
var dx=d.目标[0]-d.源[0]，
dy=d.目标[1]-d.源[1]，
博士=数学。