Here is my d3.js code , from here on right click i am calling the function 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);

Here is my contextmenu function :

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
}   

Which opens a pop up with id= my_custom_menu , here is the popup design :

<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

Clicking on the close it closes(hides) the popup :

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

Now on close i tried to set the rectangle from where i right clicked fill green. I tried ti store the instance of the right clicked rectangle and the while closing tried to fill with green against the rectangle. But not working. Can anybody help me with my mistakes. Thanks in advance

Here is my d3.js code , from here on right click i am calling the function 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);

Here is my contextmenu function :

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
}   

Which opens a pop up with id= my_custom_menu , here is the popup design :

<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

Clicking on the close it closes(hides) the popup :

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

Now on close i tried to set the rectangle from where i right clicked fill green. I tried ti store the instance of the right clicked rectangle and the while closing tried to fill with green against the rectangle. But not working. Can anybody help me with my mistakes. Thanks in advance

• javascript
• jquery
• svg
• d3.js

• In colseup function, which value you are getting in selectNode.? whether the respecting rect node or empty..? – Manoj Commented Dec 27, 2013 at 13:10
• I am getting the object of that rect node , if i do alert selectNode it is showing [object SVGRectElement] – curiousguy Commented Dec 27, 2013 at 13:18
• check in console.log,if you get the rect DOM then give .style.fill="green"; check my post. – Manoj Commented Dec 27, 2013 at 13:26
• See your code works fine in jsfiddle , as you are taking the object of circle by getElementById and applying style.fill correspondent to that circle object. But in my code i am storing the object of rect in another input type hidden field and then applying style.fill on that object from taking the value from input type, so it is not working. Whatever I am doing by style.fill it is applying on that input type hidden field – curiousguy Commented Dec 27, 2013 at 13:33
• jsfiddle/manojmcet/84Utx/4 ...hidden field we are getting the string only not a respective object.check in console – Manoj Commented Dec 27, 2013 at 13:46

3 Answers 3

In close up function selectNode fetch only the string. Can't call style method ,

Try this code:

Fiddle:

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

For solving your problem , select node as a global variable,then access as your same code.

Fiddle

First of all I set the id correspondent to each element by :

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

Then in the function contextmenu I get the id by :

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

}

Then in the function closepop

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

}

Try this instead...

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