d3.js 家庭树配偶亮点

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

当单击一个人（节点）时，它也会选择配偶。我只想选择（突出显示）我点击的人（丈夫或妻子或孩子）。 （当我检查 FireBug 中的 html 时，配偶节点（g transform="translate(0,70)"）位于人员节点内部。我认为它们应该位于外部，但位于 g class="node" 组内）。我不知道如何解决这个问题。任何人，请帮忙。谢谢。

更新：在下面编辑

我认为你是对的，解决你的问题的最好方法是onclick问题是如何将一个人的配偶保留在与该人相同的组中（而不是嵌套组中）。除此之外，我认为您正在应用onclick在错误的地方。我的建议是

1. 将第 325-330 行更改为以下内容

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

   目前，您正在应用onclick到包含的组both该人及其配偶，而您想使用onclick分别针对每个人/配偶。请注意，一旦进行此更改，您将需要更新代码以测试每个节点的rect（而不是节点的组g)是否被选择(第355-365行)。您还必须更新 CSS 样式.node rect.normal and .node rect.selectedCSS 文件的第 25 行和第 29 行。

2. 第二个问题是您只为每个人绘制第一任配偶。目前updateSpouses函数正在迭代每个人，然后为第一个配偶添加一个带有矩形的组。您需要做的是首先为每个有配偶的人添加一个组，然后在每个人的配偶上添加一个组。这是如何修改的粗略草案updateSpouses让您开始：

   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

为了回应您的评论，我继续修改了您的原始代码http://jsfiddle.net/mdml/xJBXm/ http://jsfiddle.net/mdml/xJBXm/。以下是我所做更改的快速摘要：

1. 我把每个人分成一个组，然后每个组都有自己的onclick属性（第 141-146 行），这样当您单击矩形/文本时clickedNode叫做。
2. 我还将每组配偶放在一个组中（如上所述），以便每个配偶都可以单独单击（第 229-232 行）。
3. 我修改了resetNodePersonSelected and setNodePersonSelected功能，以便他们搜索/更新配偶和孩子。

我已经在上面描述了高层的变化，但如果您对实施有任何其他问题，请告诉我。