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

JavaScript
1

Dear Sir

I am developing Family Tree

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

Base tree

2

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.

3

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?

4

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,
5

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

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

6

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

7

Dear Sir

may i ask actually where to add this code

8

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

9

GREAT !!

It worked like magic

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

10

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

11

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

12

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

13

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

14

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"
          }
        ]
      }
    ]
  }

}

15

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

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.