Удалить текст из узлов в d3

Question

У меня есть график силы d3, который записывает текст (переписывая?) Каждый раз, когда я удаляю узел. Я думаю, что решение решить это - просто удалить текстовые метки в моей функции update(). Тем не менее, я не уверен в производительности, если это будет тяжело, если у меня будет множество узлов на экране. Я также не уверен, почему это происходит в первую очередь.

Вот куски моего кода, я думаю, что нужно сделать с вопросом:

function update() { 

    // refresh list of selected nodes 
    selectedNodes = nodes.filter(function(d) { return d.selected; }); 

    // Update link data based on edges array. 
    link = link.data(edges); 

    // Create new links 
    link.enter().append("line") 
      .attr("class", "link") 
      .style("stroke-width", 1.5); 

    // Delete removed links 
    link.exit().remove(); 

    // Update node data based on nodes array. 
    node = node.data(nodes); 

    // Create new nodes 
    node.enter().append("g") 
      .attr("class", "node") 
      .attr("id", function(d) { return d.data['id'] }) 
     //.attr("fixed", function(d) { return d.fixed=true }) 
      .call(force.drag) 
      .on('mouseover', connectedNodes) 
      .on('mouseleave', restore) 
     //.on('dblclick', highlight) 
      .on('dblclick', highlight); 

    // Delete removed nodes 
    node.exit().remove(); 

    node.append("circle").attr("r", 11); 
    node.classed("selected", function(d) { return d === d.selected; }) 

    // Node behavior for checking if selected otherwise colors nodes to color given from JSON. 
    node.style("fill", function(d) { 
     if (d.selected === false) { 
      console.log("Not Highlighting " + d.data['id'] + " selected is " + d.selected); 
      return d.data['color'] 
      update(); 
     } 
     else { 
      console.log("Highlighting " + d.data['id'] + " selected is " + d.selected); 
      return "yellow"; 
      update(); 
     } 
    }).select("circle").style("stroke", "black"); 

    // Link color based on JSON data. 
    link.style("stroke", function(d) { return d.data['color'] }); 

    // Adds text to nodes 
    node.append("text") 
      .attr("dx", 12) 
      .attr("dy", ".35em") 
      .style("fill", "black") 
      .text(function (d) { return d.data['label']; }); 

    // Creates an index used to figure out neighbor nodes. 
    root.edges.forEach(function (d) { 
     linkedByIndex[d.data.source + "," + d.data.target] = 1; 
    }); 

    // responsive behavior for graph based on window. 
    window.addEventListener('resize', resize); 

    force.on("tick", function() { 
     link.attr("x1", function(d) { return d.source.x; }) 
       .attr("y1", function(d) { return d.source.y; }) 
       .attr("x2", function(d) { return d.target.x; }) 
       .attr("y2", function(d) { return d.target.y; }); 

     node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
    }); 
    force.start(); 
} 

// Delete node with prompt 
function deleteNode() { 
    console.log("Prompted to delete selected nodes."); 
    if (confirm("Deleting selected element(s) will remove them from the graph entirely.\nAre you sure? (This cannot be undone).")) { 
     if (selectedNodes.length > 0) { 
      for (var i = 0; i < selectedNodes.length; i++) { 
       selectedNodes[i].removed = true; 
       nodes.splice(nodes.indexOf(selectedNodes[i]), 1); 
       spliceLinksForNode(selectedNodes[i]); 
      } 
     } 
     else alert("No node(s) selected."); 
     update(); 
    } 
} 

function spliceLinksForNode(node) { 
    toSplice = edges.filter(
      function(e) { 
       return (e.source === node) || (e.target === node); }); 
    toSplice.map(
      function(e) { 
       edges.splice(edges.indexOf(e), 1); }); 
} 

Вот скриншот из того, как он выглядит, как после удаления узла.

Answer 1

У меня была такая же проблема, насколько я понял, что группа делает проблемы.

Для меня удалены элементы, явные исправленные проблемы. Рядом:

// Exit any old node 
node.exit().remove(); 

Я называю также:

// Remove any old circle 
svg.selectAll("circle").remove(); 
// Remove any old text 
svg.selectAll("text").remove(); 
// Remove any old title 
svg.selectAll("title").remove(); 

в функции обновления.

Надеюсь, что ответы на них помогут кому угодно, мне понадобилось полдня, чтобы заставить его работать.