Ad

Change Fill Color Of D3.js Node

- 1 answer

I'm working off of the sample code here - http://bl.ocks.org/cjrd/6863459 to create a directed graph and play with it online. The code already has a function called

GraphCreator.prototype.changeTextOfNode

This function places editable text on the node so the user can change the value and it is called when the user clicks on a node while pressing the shift key. Now, I want to do something very similar. I want the color of the node to change when the node is clicked while pressing the Ctrl key. For this, the function I came up with is -

GraphCreator.prototype.changeColorOfNode = function(d3node, d){
  try{
      d3node.style("fill","red");
    }
    catch(e){
      alert(e.message);
    }
}

For now, I always change the color to red, just to check this works. What I see is that instead of the fill color of the circle representing the node changing, the font color of the text in the circle changes to red. Does any one know how I'll change the fill color?

Ad

Answer

Currently you are applying the fill style to g elements instead of circles. That is why only the color of text changes. You should try as shown below.

d3node.select("circle").style("fill","red");

To find the existing color of node

d3node.select("circle").style("fill"); //returns current fill color applied
Ad
source: stackoverflow.com
Ad