6

svgサークルを右クリックすると、カスタムコンテキストメニューが表示されるようにしたいと思います。今のところ、次のコードで右クリックを処理するのに役立つこの回答を見つけました。

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

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

ここで、HTMLを含むボックスを表示する方法を知りたいと思います。

前もって感謝します。

4

2 に答える 2

13 
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();
});
于 2012-10-26T17:36:18.797 に答える
3

受け入れられた回答にコメントするだけです（直接コメントするのに十分なポイントがありません）。しかし、d3の最新バージョンでは、xとyだけでなく、d3.event.pageXとd3.event.pageYが必要なようです。ここのドキュメントによると。

だから私のコードは（このサイトからのIEの助けを借りて）：

.on('contextmenu', function(data, index) {
      if (d3.event.pageX || d3.event.pageY) {
          var x = d3.event.pageX;
          var y = d3.event.pageY;
      } else if (d3.event.clientX || d3.event.clientY) {
          var x = d3.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
          var y = d3.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      }

      d3.select('#action_div')
        .style('position', 'absolute')
        .style('left', x + 'px')
        .style('top', y + 'px')
        .style('display', 'block');

      d3.event.preventDefault();
  })
于 2013-08-08T14:18:57.257 に答える