d3.js - d3js - javascript tree diagram

d3.js Family Tree Spouse Destacado

Question

Enlace de código: http://jsfiddle.net/mj58659094/yKUsQ/ ;

Cuando se hace clic en una persona (nodo), también selecciona al cónyuge. Solo quiero seleccionar (resaltar) a la persona que hice clic (esposo o esposa o hijo). (Cuando inspecciono el html en FireBug, los nodos del cónyuge (g transform = "translate (0,70)") están dentro de los nodos persona. Creo que deberían estar afuera, pero dentro de g class = "node" group). No sé cómo arreglar esto. Alguien, por favor ayuda. Gracias.

Answer 1

Actualizado: Editar a continuación

Creo que tiene razón en que la mejor manera de resolver su problema de onclick es mantener a los cónyuges de una persona en el mismo grupo que la persona (en lugar de en un grupo anidado). Además de eso, creo que estás aplicando el onclick en el lugar equivocado. Mi consejo es

1. Cambie las líneas 325-330 a la siguiente

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

   Actualmente, usted estaba aplicando el onclick en el grupo que contiene tanto a la persona como a sus cónyuges, mientras que en su lugar desea utilizar el onclick en cada persona / cónyuge por separado. Tenga en cuenta que una vez que realice este cambio, tendrá que actualizar su código para probar el rect cada nodo (en lugar del grupo g del nodo) en cuanto a si está seleccionado (líneas 355-365). También deberá actualizar su CSS al estilo .node rect.normal y .node rect.selected en las líneas 25 y 29 de su archivo CSS.

2. El segundo problema es que solo está dibujando el primer cónyuge para cada persona. Actualmente, la función updateSpouses itera sobre cada persona y luego agrega un grupo con un rectángulo solo para el primer cónyuge. Lo que debe hacer es agregar primero un grupo para cada persona con sus cónyuges, y luego sobre los cónyuges de cada persona. Aquí hay un borrador de cómo modificar los updateSpouses para que pueda comenzar:

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

Editar

En respuesta a su comentario, continué y modifiqué su código original http://jsfiddle.net/mdml/xJBXm/ . Aquí hay un resumen rápido de los cambios que hice:

1. Puse a cada persona en un grupo, que luego tiene su propio atributo onclick (líneas 141-146), de modo que al hacer clic en el rectángulo / texto se hace clic en clickedNode .
2. También puse cada grupo de cónyuges en un grupo (como se describe arriba) para que cada uno de ellos también pueda hacer clic individualmente (líneas 229-232).
3. setNodePersonSelected funciones resetNodePersonSelected y setNodePersonSelected para que busquen / actualicen los cónyuges además de los resetNodePersonSelected .

Describí los cambios en el nivel superior anterior, pero avíseme si tiene más preguntas sobre la implementación.