I've been reading a lot lately about ellipsis and Bezier Curves, in order to be able to draw a "Speech Bubble" with d3js: This bubble has to be contained inside a rectangular or square container like so:
http://edn.embarcadero.com/article/images/10277/D15PX16.jpg
But of course it would contain a small arrow on the bottom left to give that "speech bubble" effect. Since this container will be resizable, I need the points to be recalculated when it happens.
Given those conditions, the bubble could be elliptic or an almost perfect circle in case of a square container. I'm guessing I can't use ellipsis, because drawing the arrow of the Speech Bubble would not be possible in that case.
While doing research, I've stumbled upon http://spencermortensen.com/articles/bezier-circle/ which I thought would be a good place to start but I can't really grasp how to start translating this into code, and most importantly how to use d3js to help me render it, espcially since I have the difficulty of having to draw an arrow somewhere on left bottom part of my ellipse.
I'd be really thankful if somebody could explain to me how to calculate the points I need to draw that speech bubble, and how D3js can draw it.
Thanks !
PS: Sorry I couldnt be more specific and add images, but my current reputation doesn't allow me to.