Context menu on several elements: circle, rect or whole.

<!DOCTYPE html>
<html>
  <head>
    <title>Context Menu</title>
    <style>
      #main {
        display: inline-block;
        background-color: grey;
        position: relative;
      }
      .menu {
        border: 1px solid black;
        background-color: grey;
        display: none;
        position: relative;
      }
      .menu,
      .menu li {
        padding: 0px;
        margin: 0px;
      }
      .menu li {
        color: white;
      }
      .menu > li:hover {
        background-color: lightblue;
        color: black;
      }
      .menu li {
        display: none;
      }

.menu.svg li.svg ,
      .menu.svg li.svg li,
      .menu.rect li.rect ,
      .menu.circle li.circle li,
      .menu.circle li.circle {
        display: block;
      }
      /* Support sub menu */
      .menu li ul {
        display:none;
      }
      .menu li:hover ul {
        display:inline-block;
        position: relative;
        top: 0;
      }

li.color {
        width: 30px;
        height: 20px;
      }
      li.color-1 {
        background-color: red;
      }
      li.color:hover {
        opacity: 0.5;
      }
      li.color-2 {
        background-color: green;
      }
    </style>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      window.onload = function() {
        var context = null;
        var circles = [
          {id: 1, x: 100, y: 100, r: 30},
          {id: 2, x: 200, y: 100, r: 30},
          {id: 3, x: 150, y: 250, r: 30}
        ];
        var rects = [
          {id: 1, x: 50, y: 150, w: 10, h: 60},
          {id: 2, x: 200, y: 150, w: 30, h: 40}
        ];
        var svg = d3.select('#main')
                .append('svg:svg')
                .attr('width', 300)
                .attr('height', 300)
                .attr('fill', 'red')
                ;

var contextMenu = function(that, newContext) {
          if (context) {
            if (context !== newContext) {
              console.log('contextmenu: cannot execute for context: ' + newContext + ' while in current context: ' + context);
              return;
            }
          }
          context = newContext;
          console.log('contextmenu:' + context);
          d3.event.preventDefault();

var position = d3.mouse(that);
          d3.select('#context-menu')
                  .style('position', 'absolute')
                  .style('left', position[0] + "px")
                  .style('top', position[1] + "px")
                  .style('display', 'inline-block')
                  .on('mouseleave', function() {
            d3.select('#context-menu').style('display', 'none');
            context = null;
          });
          d3.select('#context-menu').attr('class', 'menu ' + context);
        }

svg.selectAll("circle")
                .data(circles)
                .enter()
                .append("circle")
                .attr('r', function(d) {
          return d.r;
        })
                .attr('cx', function(d) {
          return d.x;
        })
                .attr('cy', function(d) {
          return d.y;
        })
                .on("contextmenu", function(data, index) {
          contextMenu(this, 'circle', data, index, circles);
          d3.event.preventDefault();
        });

svg.selectAll("rect")
                .data(rects)
                .enter()
                .append("rect")
                .attr('x', function(d) {
          return d.x;
        })
                .attr('y', function(d) {
          return d.y;
        })
                .attr('width', function(d) {
          return d.w;
        })
                .attr('height', function(d) {
          return d.h;
        })
                .on("contextmenu", function(data, index) {
          contextMenu(this, 'rect', data, index, rects);
          d3.event.preventDefault();
        });

svg.on("contextmenu", function(data, index) {
          contextMenu(this, 'svg', data, index);
          d3.event.preventDefault();
        });

}
    </script>
  </head>
  <body>
    <div id="main"></div>
    <ul id="context-menu" class="menu">
      <li class="svg" id="svg-id">SVG Item</li>
      <li class="circle" id="action-circle-1">Circle item 1</li>
      <li class="rect" id="action-rect-1">Rect item 1</li>
      <li class="rect" id="action-rect-2">Rect item 2</li>
      <li class="circle" id="circle-2">Circle item 2</li>
      <li class="rect circle svg" id="action-color-select">Color: 
        <ul>
          <li class="color color-1"></li>
          <li class="color color-2"></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js