JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 在d3.js中制作一个弧大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 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)")

http://jsfiddle.net/g0r9n090/工作示例

大佬总结

以上是大佬教程为你收集整理的javascript – 在d3.js中制作一个弧全部内容,希望文章能够帮你解决javascript – 在d3.js中制作一个弧所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。