D3.js Dendrogram: vincolante vecchie e nuove proprietà all'elemento SVG

Question

La mia comprensione di D3 è attualmente piuttosto limitata e attualmente sto giocando con un esempio di D3.JS. Si può trovare su diversi posti: su Questa versione interattiva per esempio.

Quando lo impleggo, tutto va bene finché non provi ad aggiornare una proprietà come il diametro del cerchio dei nodi. Se lo faccio (usando un quadro interattivo come AngularJS che guarda il cambiamento dei parametri): i nodi cambiano dimensioni. Quindi nessun problema ancora. Tuttavia, se ho quindi fatto clic su uno dei nodi, la dimensione viene ripristinata alla dimensione di inizializzazione anziché quella nuova.

Quando un nodo viene fatto clic su Segui la funzione Fare clic:

 var nodeEnter = node.enter().append("g")
                        .attr("class", "dendrogramnode2")
                        .on("click", click);

.

La funzione Fare clic detta una funzione di aggiornamento.

        function click(d) {
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
            update(d);
        }

.

che quindi aggiorna il dendrogram e si apre o chiude i nodi necessari.

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 80; });

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      //.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
      .on("click", click);

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeEnter.append("text")
      .attr("x", 10)
      .attr("dy", ".35em")
      .attr("text-anchor", "start")
      //.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length * 8.5)  + ")"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1)
      .attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50)  + ")"; });

  // TODO: appropriate transform
  var nodeExit = node.exit().transition()
      .duration(duration)
      //.attr("transform", function(d) { return "diagonal(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

.

Questa funzione di aggiornamento viene quindi chiamata:

.

1. all'inizializzazione -> Nessun problema (esempio: cerchio r= 5)

2. Quando un parametro viene aggiornato -> Nessun problema, il parametro si aggiorna. (Esempio: cerchio r= 10)

3. Quando fai clic su un nodo -> problematico -> grafico richiede parametri iniziali. (Esempio: cerchio r= 5)

Tutto ciò ha probabilmente molto a che fare con l'ambito e il modo in cui JavaScript gestisce il databanding ma non so come farlo correttamente. Devo essere in grado di accedere alle nuove proprietà invece dei vecchi.

C'è un modo per

.

1. Adatta il codice in modo che il nuovo parametro sia prelevato al posto dei vecchi?

2. Legare i parametri al gruppo SVG come oggetto (probabilmente non così efficiente?) Così io può raggiungere manualmente per qualsiasi scopo con i selettori D3?

Answer 1

Ho impostato una proprietà sull'elemento DOM per tali attributi che non differiscono per riferimento.

            function dograph(p){
                //paramater object is passed and it's name is "p"
                d3.select(elementid).selectAll("svg")[0][0]["p"] = p
                //at some point update function gets called as part of an event and p is no longer available. 

                //someSvgElement
                        .on("mouseover"){update())}

                function update(source) {
                    var p = d3.select(elementid).selectAll("svg")[0][0]["p"];
                    //stuff happens
                }
            }

.

potrebbe non essere la soluzione perfetta ma funziona per me.