right-click on a d3.js element: how to prevent browser context menu to appear

Question

I have some d3.js element plotted, eg:

 // draw rectangle 
  svg.selectAll(".rect").append("rect")
        .attr("y", 10)
        .attr("x", 10)
        .attr("height", 5)
        .attr("width", 5)
        .on("contextmenu", function (d, i) {  
    // react on right-clicking
 });

and it works fine but also opens browser's context menu. How I can prevent that from happening?

Answer 1

Add d3.event.preventDefault(); to your function.

 // draw rectangle 
  svg.selectAll(".rect").append("rect")
        .attr("y", 10)
        .attr("x", 10)
        .attr("height", 5)
        .attr("width", 5)
        .on("contextmenu", function (d, i) {
            d3.event.preventDefault();
           // react on right-clicking
        });