d3.js Family Tree Spouse Highlight -


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

enter image description here

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.


Comments

Post a Comment

Popular posts from this blog

php - Add the correct number of days for each month -

using following function can display years , months between 2 dates, how can add correct days each month array within each month? can't add days manually need account leap years etc. function yearmonth($start_date, $end_date) { $begin = new datetime( $start_date ); $end = new datetime( $end_date); $interval = new dateinterval('p1m'); // 1 month interval $period = new dateperiod($begin, $interval, $end); foreach ( $period $dt ) $years[$dt->format( "y" )][] = $dt->format( "f" ); return $years; } $list = yearmonth("2007-03-24", "2009-06-26"); var_dump($list); since nobody else answered: function yearmonth($start_date, $end_date) { $begin = new datetime( $start_date ); $end = new datetime( $end_date); $interval = new dateinterval('p1d'); // 1 month interval $period = new dateperiod($begin, $interval, $end); $lastmonth = null; $lastyear = null; $aresult = array(); forea...
Read more

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more