search

codesuki / react-d3-components

D3 Components for React
http://codesuki.github.io/react-d3-components/example.html
MIT License
1.63k stars 206 forks source link

How to put animation and image in donut (pie chart) ? #97

Open shashank734 opened 8 years ago

shashank734 commented 8 years ago

Hey Thanks for the Library, I have some questions How i can set animation in donuts (like tween arcs) and i want to put a svg image in donut. how i can do this ?

i wanna create something like this.

screen shot 2016-05-24 at 5 13 39 pm
codesuki commented 8 years ago

At the moment there is no animation support. Sorry. There is a base in the feature/transition branch. If you need it you could extend the implementation. The branch also adds support for layering of charts so you could layer the pie chart on top of an image.

If you don't need the animations but the image is important you could try to add the image as an svg child to the pie chart.

Pseudocode:

image = <svgImageComponent src="url.png"/>

<piechart settings={}><image/></piechart>

This should work because looking at the code all charts include their children inside the SVG element.

codesuki commented 7 years ago

@shashank734 This week I worked a bit on the animations and I managed to do arc tweening. I will continue to work on it a bit and maybe release a beta soon.