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

这是我的d3.js代码，从这里开始，右键单击我正在调用函数

上下文菜单

// 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);

这是我的

上下文菜单

功能：

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\u custom\u菜单

，下面是

弹出窗口

设计：

<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

上，我试图设置右键单击

fill green

的矩形。我尝试存储右键单击的

矩形的
实例
，关闭时尝试在矩形上填充
绿色
。但不起作用。有人能帮我改正错误吗。提前谢谢
试试这个

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

在特写功能
中选择节点
仅获取
字符串
。无法调用样式方法

请尝试以下代码：

：

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

为了解决您的问题，请选择node作为全局变量，然后选择access作为相同的代码

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

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

然后在
功能中
上下文菜单
通过以下方式获取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

}

然后在
功能中
closepop

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

}
我尝试了，但得到了这个错误
TypeError:selectNode.style是未定义的selectNode.style.setProperty（“填充”、“绿色”和“”）
并使用.attr而不是.style？相同的错误：
TypeError:selectNode.attr是未定义的selectNode.attr.setProperty（“填充”、“绿色”、“绿色”）你想变成绿色是什么？nodeId是输入元素。如果是rect，则为rect指定一个id，然后将getElementById改为引用该id。在colseup函数中，在selectNode中获得哪个值。？无论是关于rect的节点还是空的..？我正在获取该rect节点的对象，如果我发出
警报
选择节点
它将显示
[object SVGRectElement]
签入console.log，如果您获得rect DOM，则给出.style.fill=“green”；查看我的帖子。看到你的代码在
jsfiddle
中运行良好，因为你通过
getElementById
获取圆圈对象并应用
样式。填充
对应于该
圆圈的
对象。但是在我的代码中，我将rect的
对象
存储在另一个
输入类型隐藏字段
中，然后在该对象上应用
样式。从
输入类型
中获取值，因此它不起作用。无论我用
style.fill做什么，它都将应用于
输入类型隐藏字段
…隐藏字段我们只得到字符串，而不是相应的对象。在控制台中检查
function closepop(){
 d3.select('#my_custom_menu')
 .style('display', 'none');
 var selectN=document.getElementById('nodeId').value;
d3.select('#'+selectN)
.style('fill', 'green');