Databases
StackOverflow2013
Postsdbo
POAngular-ui + D3: how to implement contextual menu (popover vs modal)?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngular-ui + D3: how to implement contextual menu (popover vs modal)?
    text
    copied!<p><strong>Given the following use-case:</strong></p> <p>I use D3js to render objects which are managed by AngularJS. I would like to add interactivity to the D3 chart. When clicking on a svg element I would like to have a kind of popup menu allowing to modify the object properties. These properties are required by AngularJS but are not rendered by D3.</p> <p>The D3-Angular integration is derived from <a href="http://bl.ocks.org/biovisualize/5372077" rel="nofollow">http://bl.ocks.org/biovisualize/5372077</a> which uses a closure.</p> <p><strong>Current implementation:</strong></p> <p>As of today I am using the $modal service from angular-ui bootstrap to create the popup menu. From a functionnality point of view it works pretty well: When clicking on a svg element, D3 dispatches an event That event is catched by Angular which calls the $modal service Within the modal window I modify the object properties</p> <p>However I am not satisfied with the rendering. I would like the popup menu to look like a popover. It should be placed close to the svg element which was clicked.</p> <p>As far as I understand, I have <strong>two options</strong>:</p> <ol> <li>Continue to use the $modal service and modify its look. What approach should be taken? Using the windowClass option?</li> <li>Stop using the $modal service and start hacking on the popover directive. The problem is that I do not think it is possible to add such a directive to an svg element. The solution would be to create a popover service close to the $modal service.</li> </ol> <p>Which option should be chosen? and how to implement it?</p> <p><strong>EDIT:</strong></p> <p>Working plunker using a custom my-popover directive: <a href="http://plnkr.co/edit/5KYvxi?p=preview" rel="nofollow">http://plnkr.co/edit/5KYvxi?p=preview</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload