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的矩形。我尝试了存储instance的{{1}}，并且关闭矩形时，right clicked rectangle的{{1}}尝试fill。但不行。任何人都可以帮我解决我的错误。提前致谢

Answer 1

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

试试这段代码：

<强> Fiddle

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

要解决您的问题，请选择node作为全局变量，然后以相同的代码进行访问。

<强> 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

}

然后在function closepop

中

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", "");

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

3 个答案: