Dynamic content with popups (and d3.js)


#1

Hi,
Am using a d3 tree/hierarchy chart that updates in realtime, creating g>text nodes.

I wish to use the Semantic UI popups on hover, but no matter what I try I can’t get it to work.
I’m guessing that its because they are dynamically added elements after the page has loaded and thus not wired into popup events.

Any ideas on how to get this working?

s.


#2

A d3 function (e.g. vizfunc), can dispatch a custom event with a unique id in the payload. This can trigger a handler that triggers the popup, using the id as the target. For example, in the snippets below, the popup is triggered by a mouseover on an a tag with a circle inside it. Each element in the mydata array is an object which contains the unique id attribute which will be used to position the popup.

First a single popup is added to the page with the id tooltip-default.

<div id="tooltip-default" class="ui wide popup">
 ...
</div>

The d3 function dispatches a custom event.

svg.selectAll('.myclass')
  .data(mydata)
  .enter()
.append('a')
 ...
  .attr("id", d => d.id)
  .on('mouseover', d => { 
    that.dispatch.call("hover",this,d) 
  })
 ...
.append('circle')
 ...

My example comes from an app using Vue.js, and in the component, a listener is added in the mounted() hook (think of that as an onReady function.) The listener sets the configuration of the popup to use the element with id as the popup target as well as its triggering element.

mounted() {
    ...
    this.vizfunc.on('hover.vz', (d) => {
    // use the data in d to populate the popup
    // set the target for the popup 
    const conf = { ...defaults, ...customdata, 'target': d.id, 'trigger':d.id }
    $(conf.trigger).popup(conf)
    $(conf.trigger).popup('show')
    ...
  })
}

The content of the popup is dynamically set using a Vue.js template, in part by the customdata properties suggested in the example.