我正在使用
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);
}
解决方法
SVG中没有弧元素,需要定义适当的路径元素.幸运的是有一个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)")
