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

Question

这是我的 d3.js 代码，从这里开始右键单击我正在调用函数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 的地方设置矩形。我尝试存储右键单击的矩形的实例，并在关闭时尝试用绿色填充长方形。但没有工作。谁能帮我解决我的错误。提前致谢

Answer 1

在关闭函数 selectNode 中只获取 string。无法调用样式方法，

试试这段代码:

Fiddle :

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

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

Fiddle