Family Tree :How can i add attribute "id" to each node

Dear Sir

I am developing Family Tree

Family Tree :How can i add attribute “id” to each node

Base tree

It would make more sense if you put your JavaScript in the JS box rather than in the HTML box. People could follow what is going on better.

Well the HTML in this case is a call to d3 and a body tag, but yes, in general that’s a good point.

How does the code know what to put into the id attribute?

Your answer is going to be:

var node = svg.selectAll(".node")
    .data(nodes)
   .enter()
    .append("g");

=>

var node = svg.selectAll(".node")
    .data(nodes)
   .enter()
    .append("g")
    .attr("id",somevaluegoeshere);

but what goes in the value?

Thanks a lot for the speedy reply

the id is now added
however i need to added or assign to each node
as id has to be unique.

the id is specified
i am not clear how to assign the id to each node

 {             "name": "Krishnaji",        "born": 1862,        "died": 1906,        "location": "Petersburg, VA",        "profession": "Archeitect",        "id":1,

oh sorry, i didnt see the id in the datanode.

.attr("id",function(d) { return d.id; });

m_hutley sir
it was not your mistake at all

sincere apologies

I added it later and then replied to you as follow

Blockquote
the id is now added
however i need to added or assign to each node
as id has to be unique.

the id is specified
i am not clear how to assign the id to each node

Blockquote

Dear Sir

may i ask actually where to add this code

as i said, it goes into the definition of the ‘g’ element for each node; that is the container for the node elements.

GREAT !!

It worked like magic

How can i add a class …to each node
say…
for male…class=male
for female class=female

Your object does not include gender information, so…

but once it does, your node definition would also have a line that says something like
.classed('male',function(d) { return d.gender == "male"; })

Dear Sir

I really appreciate express and perfect reply.

**what i want to do / achieve **
is
when clicked on node i should get id of the node.

pls guide how to capture click event

based on “Click” i can get Id of the node
then i can call jquery / ajax to display or edit information of the perform

d3 has the ability to attach .on('click',function) to any element.

Thanks

Syntax is

$(document).on("click","#test-element",function() {
        var nodeid=this.id;
       alert("click bound to node with id ="+nodeid);
   });

very honestly i don’t know what to put in place of #test-element
can this be

$(document).on(“click”,".node",function() {
alert(“click bound to document listening for #test-element”);
});

or something else…
honestly i am not in position to do this

Dear m_hurly

thanks a ton for help

pls refer link of working project

http://prajaktasoftware.com/marathetree/familytreecodepen.php

I have assigned class family to all nodes.
By clicking .family
I am getting ID-> its working

used syntax provided by you
actual code given below working fine …thanks a lot

$(document).on(“click”, “.family”, function () {
console.log(“Node id=”+this.id);
});

My current Issue

following function avails the data so as to form a tree,
. Can I get this from a input file
In other words suppose thsi data is stored in file, How can i read from input file and form the family tree

Blockquote

function getData() {
return {

    "name": "Krishnaji",
    "born": 1862,
    "died": 1906,
    "location": "Petersburg, VA",
    "profession": "Archeitect",
    "id":1,"class": "family",
    "parents": [
      {
        "name": "Visaji",
        "born": 1831,
        "died": 1884,
        "location": "Petersburg, VA",
        "profession": "Singer",
          "id":2,"class": "family",
        "parents": [
          {
            "name": "Robert Shanks",
            "born": 1781,
            "died": 1871,
            "location": "Ireland/Petersburg, VA",
               "profession": "Music Director",
               "id":3, "class": "family" 
          },
          {
            "name": "Elizabeth Shanks",
            "born": 1795,
            "died": 1871,
            "location": "Ireland/Petersburg, VA",
               "profession": "Drum Player",
               "id":4, "class": "family"
          }
        ]
      },
      {
        "name": "Ann Emily Brown",
        "born": 1826,
        "died": 1866,
        "location": "Brunswick/Petersburg, VA",
           "profession": "Builder",
            "id":5, "class": "family",
        "parents": [
          {
            "name": "Henry Brown",
            "born": 1792,
            "died": 1845,
            "location": "Montgomery, NC",
               "profession": "Surgeon",
                "id":6, "class": "family"
          },
          {
            "name": "Wife 1",
            "born": 1793,
            "died": 1882,
            "location": "Montgomery, NC",
               "profession": "Civil Eng",
                "id":7, "class": "family"
          },
           {
            "name": "Wife 2",
            "born": 1793,
            "died": 1882,
            "location": "Montgomery, NC",
               "profession": "Civil Eng",
              "id":8, "class": "family"
          }
          ,
           {
            "name": "Wife 3",
            "born": 1793,
            "died": 1882,
            "location": "Montgomery, NC",
               "profession": "Civil Eng",
                "id":9, "class": "family"
          }
        ]
      }
    ]
  } 

}

That is a JSON file. d3 has a function for that. d3.json().