d3.js家谱树配偶亮点 [英] d3.js Family Tree Spouse Highlight

问题描述

代码链接：。以下是我所做的更改的快速摘要：

1. 我把每个人放在一个组中，然后有一个 onclick 属性（141-146行），所以当你点击矩形/文本 clickedNode 被调用。


2. 我也把每组配偶在一个组


3. 我修改了 resetNodePersonSelected （如上所述），因此它们中的每一个也可以单独单击（行229-232）和 setNodePersonSelected 函数，以便他们搜索/更新子项以外的配偶。

我描述了上述高级别的更改，但让我知道您是否有任何关于实施的问题。

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

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.

解决方案

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.

这篇关于d3.js家谱树配偶亮点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！