如何用D3添加一个简单的圆弧 [英] How to add a simple arc with D3

问题描述

我想在图表部分中添加一个简单的圆弧：

I would like to add one simple arc in the chart section like a circle:

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

提供的 D3的例子使用数据属性，但我想看到它没有任何基础数据。

The provided examples of D3 are working with data properties but i would like to see it without any underlying data.

推荐答案

D3对于弧使用路径生成器。如果你不想数据驱动你的弧只是定义电弧发生器和添加一些方法...

D3 uses a path generator for arcs. If you don't want to data-drive your arc just define the arc generator and add some methods...

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)")

href =http://jsfiddle.net/h9XNz/ =nofollow> http://jsfiddle.net/h9XNz/

You can see a demo here: http://jsfiddle.net/h9XNz/

这篇关于如何用D3添加一个简单的圆弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！