如何用D3添加一个简单的圆弧

How to add a simple arc with D3

本文关键字:简单 一个 D3 何用 添加      更新时间:2023-09-26

我想在图表部分添加一个像圆圈一样的简单圆弧:

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

提供的D3示例使用数据属性,但我希望看到它没有任何底层数据。

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/