Donut chart but with multiple rings/linesrather than filled segments (example included)

[WraithJ]

Hey All

Hope some one can help.

I am new to D3, having primarily used highcharts before.

I am trying to create a donut style chart, but with lines/rings (wavey lines for added complexity), instead of filled sections.

So the design is always the same with the 4 different lines/rings, but certain portions of the lines are filled with the colour of the pie segments in order to display the data

So instead of a standard donut chart like this...



 We have a donut chart like this....



Is such an effect possible with d3?

Thanks In Advance

Wraith J

[steve rickus]

Whatever is possible with SVG is possible in D3 -- so the short answer is "Yes, it's possible".

My first thought when I look at your target image is to create a layered effect -- the traditional donut chart on the bottom, with a white overlay that top that lets the colored lines show through. Alternately, you can set up a clipping path (instead of a white overlay), which is probably cleaner and would not require the overlay to be the same color as the background to get the effect you want.

A quick search for svg clipPath examples will find pages like this -- near the bottom is a good illustration of the background showing through only where shapes and text are defined.

On Thursday, May 18, 2017 at 5:22:58 AM UTC-4, WraithJ wrote:

I am trying to create a donut style chart, but with lines/rings (wavey lines for added complexity), instead of filled sections.

So the design is always the same with the 4 different lines/rings, but certain portions of the lines are filled with the colour of the pie segments in order to display the data

 

Is such an effect possible with d3?

[Kai Chang]

Check out d3.lineRadial() to generate the undulating paths

https://github.com/d3/d3-shape/blob/master/README.md#lineRadial

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.