Question

您好我正在尝试根据上下文菜单选择添加D3地图的标记（或更改填充属性也很好）。我指的是http://jsfiddle.net/1mo3vmja/2/处的示例，（粘贴下面的代码）但是在单击上下文菜单项后，我无法获取调用上下文菜单的d3元素。有人可以帮忙吗？

var fruits = ["Apple", "Orange", "Banana", "Grape"];

var svgContainer = d3.select("body")
    .append("svg")
    .attr("width", 200)
    .attr("height", 200);

var circle = svgContainer
    .append("circle")
    .attr("cx", 30)
    .attr("cy", 30)
    .attr("r", 20)
    .on('contextmenu', function(d,i) {
          // create the div element that will hold the context menu
          d3.selectAll('.context-menu').data([1])
            .enter()
            .append('div')
            .attr('class', 'context-menu');
          // close menu
          d3.select('body').on('click.context-menu', function() {
            d3.select('.context-menu').style('display', 'none');
          });
          // this gets executed when a contextmenu event occurs
          d3.selectAll('.context-menu')
            .html('')
            .append('ul')
            .selectAll('li')
              .data(fruits).enter()
              .append('li')

          .on('click' , function(d) { console.log(d); return d; })


              .text(function(d) { return d; });
          d3.select('.context-menu').style('display', 'none');
          // show the context menu
          d3.select('.context-menu')
            .style('left', (d3.event.pageX - 2) + 'px')
            .style('top', (d3.event.pageY - 2) + 'px')
            .style('display', 'block');
          d3.event.preventDefault();
      });

Answer 1

您可以存储您正在绘制上下文菜单的元素：

740D1-E1162-5C890-19E61-D0CC

现在，当您选择上下文菜单元素时，您可以引用对象.on('contextmenu', function(d, i) { var me = this;//storing the circle instance inside variable me。

me

工作示例here

希望这有帮助！

D3 Map - 上下文菜单 - 无法更新路径属性

1 个答案: