d3.js 패밀리 트리 배우자 강조

Question

코드 링크 : http://jsfiddle.net/mj58659094/yKUsQ/;

사람 (노드)를 클릭

, 그것은 또한 배우자를 선택합니다. 클릭 한 사람 (남편 또는 아내 또는 자녀) 만 선택 (강조 표시)하고 싶습니다. (Firebug에서 html을 검사 할 때 배우자 노드 (g transform = "translate (0,70)")는 사람 노드 안에 있습니다. 외부에 있어야하지만 g 클래스 = "노드"그룹 내에 있어야한다고 생각합니다. 이 문제를 해결하는 방법을 모르겠습니다. 누구든지 도와주세요. 감사.

Answer 1

업데이트 : 당신의 onclick 문제를 해결하기 위해 나는 당신이 바로 생각

가장 좋은 방법은 아래의 편집은 사람으로 (대신 중첩 된 그룹) 같은 그룹에있는 사람의 배우자를 유지하는 것입니다 . 그 외에도 onclick을 잘못된 위치에 적용하고 있다고 생각합니다. 내 조언은 대신하면서, 모두 사람과 그/그녀의 배우자를 포함하는 그룹에 onclick을 적용하고, 현재 다음

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

에

1. 변경 라인 325-330이다 각 사람/배우자마다 onclick을 별도로 사용하고 싶습니다. 이 변경을 한 후에는 각 노드의 rect (노드 그룹 g 대신)이 선택되었는지 (노드 355-365) 테스트하도록 코드를 업데이트해야합니다. 또한 CSS 파일의 라인 25와 29에서 .node rect.normal 및 .node rect.selected 스타일로 CSS를 업데이트해야합니다.

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/를 수정했습니다. 여기에 내가 변경 한 내용의 간략한 요약이다 : 나는 당신이 사각형을 클릭하면되도록 한 후, 자신의 onclick 속성 (선 141-146)을 가진 그룹에서 각 사람을 넣어

1. 가/텍스트 clickedNode입니다 라는.
2. 나는 (위에서 설명한 바와 같이) 각 그룹의 배우자를 개별적으로 클릭 할 수 있도록 배치했다 (라인 229-232).
3. resetNodePersonSelected 및 setNodePersonSelected 기능을 수정하여 배우자가 자녀 이외에 검색/업데이트되도록했습니다.

위의 고급 수준의 변경 사항을 설명했지만 구현에 대해 더 궁금한 점이 있으면 알려 주시기 바랍니다.