d3.js Family Tree Spouse Highlight -

code link: http://jsfiddle.net/mj58659094/ykusq/;

when clicked on person (node), selects spouse also. want select (highlight) person clicked on (husband or wife or child). (when inspect html in firebug, spouse nodes (g transform="translate(0,70)") inside person nodes. think should outside, within g class="node" group). don't know how fix this. anyone, please help. thanks.

updated: edit below

i think right in best way solve onclick problem keep person's spouses in same group person (instead of in nested group). in addition that, think applying onclick in wrong place. advice to

1. change lines 325-330 following

   var node = g.append("svg:g").attr("class", "node")     .selectall("g")     .data(function (d) { return d.nodes; })     .enter().append("svg:g");  node.append("svg:rect")     .on("click", clickednode); 

   currently, applying onclick group containing both person , his/her spouses, while instead want use onclick on each person/spouse separately. note once make change, need update code test each node's rect (instead of node's group g) whether selected (lines 355-365). have update css style .node rect.normal , .node rect.selected on lines 25 , 29 of css file.

2. the second issue drawing first spouse each person. updatespouses function iterating on each person, , adding group rectangle first spouse. need first add group each person spouses, , on each person's spouses. here's rough draft of how modify updatespouses started:

   var node = svgtree.selectall(".node g")   .append("svg:g").attr("transform", function (d, i) {      if (i == d3.familytree.rootgeneration)        return "translate(" + (d.spousex) + "," + (d3.familytree.gapbetweenspouses) + ")";      else        return "translate(" + 0 + "," + (d3.familytree.gapbetweenspouses) + ")";    })   .filter(function (d, i) { return personspouses" in d });  var spouses = node.selectall(".spouse")   .data(function(d){ return d.personspouses }).enter()   .append("rect")   .on("click", clickednode); 

edit

in response comment, went ahead , modified original code http://jsfiddle.net/mdml/xjbxm/. here's quick summary of changes made:

1. i put each person in group, has own onclick attribute (lines 141-146), when click on rectangle/text clickednode called.
2. i put each set of spouses in group (as described above) each of them individually clickable (lines 229-232).
3. i modified resetnodepersonselected , setnodepersonselected functions search/update spouses in addition children.

i've described changes in high-level above let me know if have more questions on implementation.