d3.js - d3.js 家谱配偶亮点

Question

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

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

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（而不是节点的 group g）是否被选中（第 355-365 行）。您还必须将 CSS 更新为样式.node rect.normal以及.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);
   

编辑

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

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

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