What is the best way to implement the complex circular charts (d3.js?)

Question

I am trying to implement a chart something like this 在此处输入图片说明

I wanted to know id d3.js library would allow me to plot such kind of graphs.

Any help would be appreciated.

Answer 1

There is no need for a library, Canvas can draw the graph, animate it, scale it, or anything you might need fairly easily. The Arc method is particularly relevant.

ctx.beginPath();
//Start the arc at 90 degrees, aka the bottom.
//End the arc at 360 - (360 degrees * 46% expressed as 0.46) + our starting 90 degrees.
//Pi/180 converts degrees to radians.
ctx.arc(64,64,32,284.4*(Math.PI/180),90*(Math.PI/180));
ctx.lineWidth=8;
ctx.strokeStyle="green"
ctx.stroke();

Answer 2

If somebody's still looking for this, here's the entire thing. Just use HTML 5 canvas tag and use it's 2D context to draw. Drawing part is in JS.

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 1.5 * Math.PI, .5 * Math.PI, false); ctx.lineWidth=8; ctx.strokeStyle="green"; ctx.stroke(); ctx.beginPath(); ctx.arc(100, 75, 42, 1.5 * Math.PI, .7 * Math.PI, false); ctx.lineWidth=8; ctx.strokeStyle="blue"; ctx.stroke(); ctx.beginPath(); ctx.arc(100, 75, 34, 1.5 * Math.PI, .6 * Math.PI, false); ctx.lineWidth=8; ctx.strokeStyle="red"; ctx.stroke();

 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> </body> </html>

What is the best way to implement the complex circular charts (d3.js?)

Question

2 answers

solution1
1 2014-04-10 21:59:00

solution2
1 2018-01-09 22:04:31

What is the best way to implement the complex circular charts (d3.js?)

Question

2 answers

solution1 1 2014-04-10 21:59:00

solution2 1 2018-01-09 22:04:31

solution1
1 2014-04-10 21:59:00

solution2
1 2018-01-09 22:04:31