Javascript 在d3.js中生成圆弧

我正在使用javascript库d3.js（）创建画布数据可视化。我试图创建一个弧，但它不接受数组中的数据参数。有人知道我做错了什么吗？这是我的代码：

var chartConfig = { "canvasSize" : 800 }

var radius = chartConfig.canvasSize / 2;
var pi = Math.PI;

var vis = d3.select("#chart").append("svg")
    .attr("width", radius * 2)
    .attr("height", radius * 2)
    .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var arcData = [
  {aS: 0, aE: 45,rI:radius/2,rO:radius}
];
var arc = vis.selectAll("arc").data(arcData).enter().append("arc");
arc.attr("innerRadius", function(d){d.rI}).attr("outerRadius",function(d){d.rO}).attr("class","arc");

function degToRad(degrees){
  return degrees * (pi/180);
}

---

SVG中没有

arc

元素，您需要定义适当的path元素。幸运的是，有一个

d3

helper函数可以实现这一点

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (Math.PI/180)) //converting from degs to radians
    .endAngle(3) //just radians

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(200,200)")

---

工作榜样

这可以从arcData数组中返回正确的值，但实际上不会将圆弧绘制到屏幕上。少了什么？我已经附上了DOM树的屏幕截图-arc节点在那里，但什么也没有出现。很抱歉，我刚刚看到了一个直接的问题，即您没有返回值。完全错过了您试图创建

arc

元素的部分。我用一个创建arc的示例更新了我的答案。仅供参考：d3.svg.arc（）已更改为d3.arc（）