D3.js 右键单击​​打开弹出窗口，但在弹出窗口关闭时不影响源 svg

Question

这是我的 d3.js 代码，从这里开始 right click 我正在调用函数 contextmenu

// Display the tiles for each bucket.
var tile = svg.selectAll(".tile")
    .data(buckets)
    .enter().append("g");

// add rect and rect attributes         
tile.append("rect")
//.enter().append("rect")
.attr("class", "tile")
.attr("x", function (d) {
return x(d.country) + margin.left + margin.left_padding;
})
.attr("y", function (d) {
return y(d.distrinct_port_nme);
})
.attr("width", x.rangeBand())
.attr("height", y.rangeBand())
.attr("stroke", "goldenrod")
.attr("fill", function (d) {
return z(d.sum_teu);
})
.on("contextmenu",contextmenu);

这是我的contextmenu 函数：

function contextmenu(){
 var node= d3.select(this);
 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();
document.getElementById('nodeId').value= node
}   

打开一个带有 id= my_custom_menu 的弹出窗口，这里是 popup 设计：

<div id="my_custom_menu" style="display:none;">
<ul> 
<input type="hidden" name="nodeId" id="nodeId" value="" />
 <li onclick="closepop()" style="cursor:pointer;">Close</li>
 <li style="cursor:pointer;">Change color</li>
</ul>
</div

单击close 会关闭（隐藏）popup：

function closepop(){
d3.select('#my_custom_menu')
 .style('display', 'none');
var selectNode =  document.getElementById('nodeId').value;
selectNode.style("fill", "green");
}

现在在close 上，我尝试设置我右键单击fill green 的矩形。我尝试将right clicked rectangle 的instance 存储起来，同时关闭时尝试将fill 和green 放在矩形上。但不工作。任何人都可以帮助我解决我的错误。提前致谢

Answer 1

在特写功能selectNode 中仅获取string。无法调用样式方法，

试试这个代码：

Fiddle:

var selectNode =  document.getElementById('cir');
     selectNode.style.fill="red";

为了解决您的问题，请选择节点作为全局变量，然后以相同的代码访问。

Fiddle

Answer 2

首先我通过以下方式设置每个元素对应的id：

.attr("id", function(d) { return "id_" + parseInt(d.x)+"_"+parseInt(d.y)+"_"+Math.floor((Math.random()*100)+1) })

然后在 function contextmenu 我得到 id ：

function contextmenu() {
var position = d3.mouse(this);
var node= d3.select(this).attr("id");   
d3.select('#my_custom_menu')
  .style('position', 'absolute')
  .style('left', position[0]+200 + "px")
  .style('top', position[1] + "px")
  .style('display', 'block');

d3.event.preventDefault();
document.getElementById('nodeId').value= node

}

然后在functionclosepop

function closepop(){
 d3.select('#my_custom_menu')
 .style('display', 'none');
 var selectN=document.getElementById('nodeId').value;
d3.select('#'+selectN)
.style('fill', 'green');

}

Answer 3

试试这个吧……

var selectNode =  document.getElementById('nodeId');
selectNode.style.setProperty("fill", "green", "");