Custom context menu in d3 and svg

Christopher Chiche picture Christopher Chiche · Oct 26, 2012 · Viewed 16.2k times · Source

I would like to have custom context menu appearing when I right click on an svg circle. For now I have found this answer that helps me to handle the right click with the following code:

.on("contextmenu", function(data, index) {
   //handle right click

   //stop showing browser menu
   d3.event.preventDefault()
});

Now I would like to know how I can show a box containing some HTML.

Thanks in advance.

Answer

meetamit picture meetamit · Oct 26, 2012
d3.select('#stock_details .sym').on("contextmenu", function(data, index) {
    var position = d3.mouse(this);
    d3.select('#my_custom_menu')
      .style('position', 'absolute')
      .style('left', position[0] + "px")
      .style('top', position[1] + "px")
      .style('display', 'block');

    d3.event.preventDefault();
});