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（而不是節點的組g）是否已選擇（第355-365行）。您還必須將CSS更新爲您的CSS文件第25和29行的.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的功能，以便他們除了孩子以外還搜索/更新配偶。

我已經描述了上面高層次的變化，但是讓我知道你是否對實現有更多的問題。