我正在使用 javascript 库 d3.js ( http://d3js.org/ ) 创建 Canvas 数据可视化。我正在尝试制作弧线,但它不接受来 self 的数组的数据参数。有谁知道我做错了什么?这是我的代码:
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
元素,需要定义合适的路径元素。幸运的是,有一个 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)")
关于javascript - 在 d3.js 中制作弧线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12717652/