如何用 D3 添加简单的弧线

【问题标题】：How to add a simple arc with D3如何用 D3 添加简单的弧线
【发布时间】：2012-08-22 14:07:03
【问题描述】：

我想在图表部分添加一个简单的弧线，比如一个圆圈：

vis.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50);

提供的examples of D3 正在使用数据属性，但我希望看到它没有任何基础数据。

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

D3 使用弧的路径生成器。如果您不想对弧进行数据驱动，只需定义弧生成器并添加一些方法...

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (Math.PI/180)) //convert from degs to radians
    .endAngle(3) //just radians

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(50,50)")

您可以在此处查看演示：http://jsfiddle.net/h9XNz/

【讨论】：

太棒了，这正是我想要的！谢谢
@KyleLahnakoski 不知道为什么它在 Firefox 中不起作用，在我解决这个问题时尝试使用 Chrome。