I'd like to place a bar chart inside of my tooltip.

25 views
Skip to first unread message

Robin Burrage

unread,
Jun 21, 2017, 4:28:52 PM6/21/17
to d3-js
Hello, 

I have created a bubble chart and implemented tooltips on mousemove. I would love to place a bar chart inside my tooltips that displays additional information. 

I am already getting the data for the bar chart, which you can see in the tooltip, when you mouseover a circle, under "Data for Bar Chart." 

I have also added an svg element with a class of  for the bar chart in my code -- <svg class='barChart'></svg>. I just don't know how to get those 3 dollar amounts to show up in bar chart form inside of my tooltip (in place of the text that is currently there). 

If anyone has done this, or knows how to, I will appreciate your help. 


Thank you!
Robin

Seemant Kulleen

unread,
Jun 22, 2017, 10:53:01 PM6/22/17
to d3-js
Happy Thursday Robin!

What you're looking to do is possible, but can potentially add some code complexity.

My recommendation is to use mbostock's "Toward Resuable Charts" pattern.  The way it works is that you send your 'reusable block' the DOM element in which to render, and it does.

In your case, on "mouseover" (rather than "mousemove", I should think?), you would send the tooltip's div to the reusable block, along with the appropriate data points, and render.

That's a very concise description of its functionality, but I hope it gets you going.

Cheers,
Seemant


--
Oakland Finish Up Weekend
Be Amazed.  Be Amazing.
Get Mentored | Get Inspired | Finish Up
http://oaklandfinishup.com


--
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.

Reply all
Reply to author
Forward
0 new messages