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

Question

嗨，我正在尝试添加基于上下文菜单选择的D3地图的标记(或者更改fill属性也可以)。我引用了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

可以存储要在其上绘制上下文菜单的元素，如下所示：

  .on('contextmenu', function(d, i) {
      var me = this;//storing the circle instance inside variable me

现在，当您选择上下文菜单元素时，您可以引用对象me。

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

工作实例这里

希望这能有所帮助！