使用d3.js制作弧形

Question

我正在使用 JavaScript 库 d3.js (http://d3js.org/) 创建画布数据可视化。我尝试制作一条弧线，但它无法接受来自我的数组的数据参数。有谁知道我做错了什么吗？这是我的代码：

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);
}

- mheavers

Answer 1

SVG中没有arc元素，您需要定义适当的路径元素。幸运的是，有一个d3帮助函数来完成这个任务。

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)")

示例可在http://jsfiddle.net/g0r9n090/上找到;

- Bill

---

这段代码可以从arcData数组中返回正确的值，但它并没有在屏幕上绘制弧形。缺少什么？我附上了DOM树的截图 - 弧形节点已经存在，但是没有任何显示。 - mheavers

抱歉，我只是看到了您没有返回值的直接问题。完全忽略了您正在尝试创建一个“arc”元素的部分。我已经更新了我的答案，并提供了创建弧形的示例。 - Bill

FYI: d3.svg.arc() 已更改为 d3.arc()。 - luQ