javascript – 如何使用D3添加简单的弧

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用D3添加简单的弧前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在图表部分添加一个简单的圆弧,如圆圈:
  1. vis.append("circle")
  2. .style("stroke","gray")
  3. .style("fill","white")
  4. .attr("r",40)
  5. .attr("cx",50)
  6. .attr("cy",50);

提供的examples of D3正在处理数据属性,但我希望看到它没有任何底层数据.

解决方法

D3使用路径生成器进行弧.如果您不想对弧进行数据驱动,只需定义弧生成器并添加一些方法……
  1. var arc = d3.svg.arc()
  2. .innerRadius(50)
  3. .outerRadius(70)
  4. .startAngle(45 * (Math.PI/180)) //convert from degs to radians
  5. .endAngle(3) //just radians
  6.  
  7. vis.append("path")
  8. .attr("d",arc)
  9. .attr("transform","translate(50,50)")

你可以在这里看到一个演示:http://jsfiddle.net/h9XNz/

猜你在找的JavaScript相关文章