d3.js - graphs - Cómo actualizar elementos del diseño de fuerza D3 cuando los datos subyacentes cambian

install d3

Question

Estoy usando uno de los ejemplos de diseño de fuerzas ( http://bl.ocks.org/1153292 ) para mostrar una red en mi sitio web.

Permito que el usuario elija qué tipo de enlaces ver en un momento dado. Observé que cuando elijo ver el tipo de enlace A, agrego el tipo de enlace B y luego elimino el tipo de enlace A, los enlaces restantes de tipo B se presentan con los colores A.

Este es el código que se ejecuta para agregar los enlaces al diagrama svg. Estoy cambiando la matriz this.links agregando y quitando enlaces de ella. Como puede ver, configuré el atributo de clase pero no está actualizando; sigue siendo del tipo de enlace A.

var path = svg.append("svg:g")
    .selectAll("path")
    .data(this.links)
   .enter()
    .append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

Actualmente, soluciono este problema actualizando el atributo de clase dentro de la función tic, pero este supuesto fuera de curso causa mucho trabajo innecesario.

Leí que la operación enter devuelve una selección fusionada de los elementos existentes y también los nuevos para que la operación attr actualice el existente y establezca el nuevo.

¿Qué me estoy perdiendo?

Answer 1

Encontré la respuesta en esta publicación

var circle = svg.selectAll("circle")
    .data(data);

circle.enter().append("circle")
    .attr("r", 2.5);

circle
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

circle.exit().remove();

La respuesta es que necesito llamar al operador attr sobre el resultado de selectAll.data y no sobre el resultado del operador de agregar.

Answer 2

Hay un ejemplo en http://bl.ocks.org/1095795 que muestra cómo agregar y eliminar nodos desde un diseño dirigido a la fuerza. Los enlaces y los nodos deben manejarse por separado y luego debe reiniciarse el diseño de la fuerza.

function restart() {
  var link = vis.selectAll("line.link")
      .data(links, function(d) { return d.source.id + "-" + d.target.id; });

  link.enter().insert("svg:line", "g.node")
      .attr("class", "link");

  link.exit().remove();

  var node = vis.selectAll("g.node")
      .data(nodes, function(d) { return d.id;});

  var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .call(force.drag);

  nodeEnter.append("svg:image")
      .attr("class", "circle")
      .attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
      .attr("x", "-8px")
      .attr("y", "-8px")
      .attr("width", "16px")
      .attr("height", "16px");

  nodeEnter.append("svg:text")
      .attr("class", "nodetext")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.id });

  node.exit().remove();

  force.start();
}