shawnbot / d3-bootstrap Goto Github PK

Hi Shawn, and CC @mbostock,

As you may know, @tmcw and I are using d3-bootstrap components in iD. Right now we have a home-grown typeahead component, and I was looking into generalizing it for inclusion in d3-bootstrap. However, it's not clear to me how to translate some of the bootstrap idioms to d3, and I wanted to see if you had any thoughts.

bootstrap-typeahead uses $.fn.data to store a per-element Typeahead instance which implements the necessary state and behavior. For typeahead, this includes most importantly a reference (this.$menu) to the ul element that displays the typeahead results. Imagine implementing for d3-bootstrap-typeahead a typeahead.close(selection) function -- it needs to hide the menu element corresponding to each element in the selection.

In d3, per-element state is normally either part of the datum or manifested in the local variables of a element-specific closure. Neither of those are suitable in this case: for reusable components like typeahead, the data need to be reserved for user purposes. And closures provide no way of obtaining the state given only a selection or element.

Alternatives:

• Store data in DOM element properties. This appears to be what existing boostrap-d3 components do. Simple, but introduces risks of name collision, and leads one towards an un-d3-ish classical Typeahead prototype.
• Materialize all state in the DOM such that it can be recalculated later. For instance, finding the typeahead menu based on DOM traversal or sub-selection. Awkward and error-prone in some cases.
• Create a per-element data side-channel akin to $.fn.data. This also boils down to DOM element properties, but perhaps in a more maintainable way.

That's a very brief summary of the issues so let me know if it is unclear. Otherwise, any thoughts?

I am trying to use d3-popover on a map I am rendering using d3. Here are my script includes:

At the appropriate time I invoke:
d3.selectAll(".desired")
.call( d3.tooltip().placement("right") );

At this point, the chrome console displays a typeerror with the message: "Object # has no method 'popover'"

I could not find any help on the internet. I also thought it was an issue with d3.v3 since your examples use d3.v2, but even when using v2 I get the typeerror.

Any ideas?

Thank you.

Hi Shawn,

Loving' the project, thank you!

I am trying to figure out how to get the popovers to trigger manually.
I have a force directed graph and I want to show the popover for each node on drag end:
http://bl.ocks.org/mbostock/4062045

Thanks!

It would be nice to have an example for using tooltips with svg elements.

see http://stackoverflow.com/questions/14697232/how-do-i-show-a-bootstrap-tooltip-with-an-svg-object

I do have a project supporting d3v4 and bootstrap 3.3 here : https://github.com/sebt3/d3-bootstrap