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

The presented D3 examples work with data properties, but I would like to see them without any underlying data.

+6
source share
1 answer

D3 uses a path generator for arcs. If you do not want the data to bring your arc, just define an 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)") 

Here you can see the demo: http://jsfiddle.net/h9XNz/

+8
source

Source: https://habr.com/ru/post/923483/


All Articles