d3.js家谱配偶亮点

Question

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

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

Answer 1

更新：编辑

我认为你是对的，解决你的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应用于包含两者此人及其配偶的群组，而您希望对每个人使用onclick /配偶分开。请注意，进行此更改后，您需要更新代码以测试每个节点的rect（而不是节点的组g）是否已选中（第355-365行）。您还必须在CSS文件的第25行和第29行更新CSS样式.node rect.normal和.node rect.selected。

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

修改

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

1. 我将每个人都放在一个组中，然后该组具有自己的onclick属性（第141-146行），这样当您点击矩形/文本时clickedNode被调用。
2. 我还将每组配偶放在一个组中（如上所述），以便每个配偶都可以单独点击（第229-232行）。
3. 我修改了resetNodePersonSelected和setNodePersonSelected函数，以便除了孩子之外还搜索/更新配偶。

我已经描述了上述高级别的变化，但如果您对实施有任何疑问，请告诉我。