d3.js 家谱配偶突出显示

Question

d3.js 家谱配偶突出显示

3

代码链接：http://jsfiddle.net/mj58659094/yKUsQ/;

enter image description here

当点击人（节点）时，它也会选择其配偶。我只想选择（高亮显示）我点击的人（丈夫或妻子或孩子）。（当我在FireBug中检查html时，配偶节点（g transform =“translate（0,70）”）位于人节点内部。我认为它们应该在外面，但在g class =“node”组内）。我不知道如何解决这个问题。请有经验的人帮帮我。谢谢。

- mj8591

我认为问题出在添加配偶的方式上。现在，“personSpouses”可以是人的列表，但是你的家谱中没有人有多个配偶。我尝试给你代码中第一个人物添加了多个配偶，但是她并没有显示出来。如果你确实希望人们能够有多个配偶，我建议先解决这个问题，因为我认为解决“onclick”问题将会很简单。 - mdml

@mtitan8 感谢您的快速回复。我的原始JSON数据包含多个配偶，我在jsFiddle中缩短了它。这是一个有多个配偶的示例http://jsfiddle.net/mj58659094/StWcr/1/。在JSON中，personId：“1000101” Father-3（SMJ）结过两次婚，第一任妻子是personId：“1000102”，第二任妻子是personId：“1000103”，第二个配偶没有显示，但这是另一个问题。 - mj8591

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mdml · Accepted Answer

更新：请见下文

我认为解决您的 onclick 问题的最好方式是将人的配偶放在与人相同的组中（而不是在嵌套组中）。除此之外，我认为您将 onclick 应用在了错误的地方。我的建议是：

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.

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

编辑

根据你的评论，我修改了你原来的代码http://jsfiddle.net/mdml/xJBXm/。这里是我所做的更改的快速概述：

我将每个人放在一个组中，每个组都有自己的onclick属性（第141-146行），因此当单击矩形/文本时会调用clickedNode。
我还将每组配偶放在一个组中（如上所述），以使它们各自可单独点击（第229-232行）。
我修改了resetNodePersonSelected和setNodePersonSelected函数，以便它们除了更新子级外还可以搜索/更新配偶。

我已经高层次地描述了更改，如果您对实现有任何更多问题，请告诉我。