3

Code link: http://jsfiddle.net/mj58659094/yKUsQ/;

enter image description here

When clicked on a person (node), it selects the spouse also. I only want to select (highlight) the person I clicked on (husband or wife or child). (When I inspect the html in FireBug, spouse nodes (g transform="translate(0,70)") are inside the person nodes. I think they should be outside, but within g class="node" group). I don't know how to fix this. Anyone, please help. Thanks.

VividD
  • 10,456
  • 6
  • 64
  • 111
mj8591
  • 55
  • 1
  • 5
  • I think the issue is in how you're adding spouses. Right now, `personSpouses` can be a list of persons, but no one in your tree has more than one spouse. I tried adding more than one spouse to the fist individual in your fiddle, and she was not drawn. If you do want to people to be able to have multiple spouses, I would work on solving that problem first, because I think solving the `onclick` problem will be simple after that. – mdml Oct 07 '13 at 13:52
  • @mtitan8 Thanks for your quick response. My original json data contains more than one spouses, I shortened it for the jsFiddle. Here is the one with multiple spouses http://jsfiddle.net/mj58659094/StWcr/1/ . In json, personId: "1000101" Father-3 (SMJ), married two times, first wife was personId: "1000102" and second wife was personId: "1000103", second spouse is not displayed, but that's another problem. – mj8591 Oct 07 '13 at 14:17

1 Answers1

4

Updated: Edit below

I think you are right in that the best way to solve your onclick problem is to keep a person's spouses in the same group as the person (instead of in a nested group). In addition to that, I think you are applying the onclick in the wrong place. My advice is to

  1. Change lines 325-330 to the 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, you were applying the onclick to the group containing both the person and his/her spouses, while instead you want to use the onclick on each person/spouse separately. Note that once you make this change, you will need to update your code to test each node's rect (instead of the node's group g) as to whether it is selected (lines 355-365). You will also have to update your CSS to style .node rect.normal and .node rect.selected on lines 25 and 29 of your CSS file.

  2. The second issue is that you are only drawing the first spouse for each person. Currently the updateSpouses function is iterating over each person, and then adding a group with a rectangle for just the first spouse. What you need to do is first add a group for each person with spouses, and then over each person's spouses. Here's a rough draft of how to modify updateSpouses to get you 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 to your comment, I went ahead and modified your original code http://jsfiddle.net/mdml/xJBXm/. Here's a quick summary of the changes I made:

  1. I put each person in a group, which then has its own onclick attribute (lines 141-146), so that when you click on the rectangle/text clickedNode is called.
  2. I also put each set of spouses in a group (as described above) so that each of them are individually clickable as well (lines 229-232).
  3. I modified the resetNodePersonSelected and setNodePersonSelected functions so that they search/update spouses in addition to children.

I've described the changes in high-level above but let me know if you have any more questions on the implementation.

mdml
  • 22,442
  • 8
  • 58
  • 66
  • 1
    Again, thanks for taking the time to going through my code. I have already tried that onClick scenario. In this case only rectangle becomes clickable. If you hover over the name text, they are not clickable. That's why click event is attached to the g element. Thanks. – mj8591 Oct 07 '13 at 16:55
  • 1
    Good point about being able to click on the text. See my updated answer above. – mdml Oct 07 '13 at 19:16
  • Thank you so much. Your solution works perfectly. Let me implement the multiple spouses scenario. Again, thank you so much. – mj8591 Oct 07 '13 at 22:13
  • Glad to help :) if the solution is useful, please consider giving it an up-vote! – mdml Oct 07 '13 at 23:26