d3.js Family Tree Супруг Выделите

Question

Код ссылки: http://jsfiddle.net/mj58659094/yKUsQ/;

При нажатии на лицо (узел), он выбирает супруга также. Я хочу только выделить (выделить) человека, на которого я нажал (муж или жена или ребенок). (Когда я проверяю html в FireBug, узлы супруг (g transform = "translate (0,70)") находятся внутри узлов пользователя. Я думаю, что они должны быть снаружи, но внутри группы g class = "node"). Я не знаю, как это исправить. Кто-нибудь, пожалуйста, помогите. Благодарю.

Answer 1

Обновлено: Edit ниже

Я думаю, вы правы в том, что лучший способ решить 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 до стиля .node rect.normal и .node rect.selected на строках 25 и 29 вашего файла 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/. Вот краткий обзор изменений, которые я сделал:

1. Я положил каждый человек в группе, которая затем имеет свои собственные onclick атрибутов (строки 141-146), так что при нажатии на прямоугольнике/текст clickedNode является называется.
2. Я также поместил каждый набор супругов в группу (как описано выше), чтобы каждый из них был индивидуально кликабель (строки 229-232).
3. Я изменил функции resetNodePersonSelected и setNodePersonSelected, чтобы они могли искать/обновлять супругов в дополнение к детям.

Я описал изменения на высоком уровне выше, но дайте мне знать, если у вас возникнут дополнительные вопросы по реализации.