Question

我一直试图创建一个力布局。除了一件事，一切都很好。即使正在删除数据，也不会删除已添加的节点

我只附加了与此问题相对应的代码，因为整个代码太大了：

function start（initial）{

link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
link.enter().insert("line", ".node").attr("class", "link");
node = node.data(force.nodes());        
  nodes = node
    .enter()
    .append("div")
      .attr("class", function(d) {
        var className = "";
        if(d.className=="event-sub-label")
        className += "node color-class-" + (((colorScale(d.category)+1)%5)+1);
        else
        className += "node color-class-" + colorScale(d.category);
        if (d.className=="event-sub-label") { className += " pop-3"; //+ popScore(d.activity_score) 
        }
        else { className += " " + d.className; }
        if (!initial) { className += " new-node new-indicator"; }
        return className;
      })
      .attr("id", function(d) { return d.id; });

 if (initial) {
    nodes = nodes
      .style("transform", "scale(0)")
      .style("-webkit-transform", "scale(0)")
  } else {
    nodes = nodes
      .style("transform", "scale(.01)")
      .style("-webkit-transform", "scale(.01)")
  }

  var events = {};
  var cancelEvent = function (d) {
    if (!events[d.id])
      return;

    clearTimeout(events[d.id]);
    return true;
  };
  nodes = nodes
    .on("mouseover", function (d) {
      var self = this;
      cancelEvent(d);
      events[d.id] = setTimeout(function () { events[d.id] = null; mouseoverNode.call(self, d); }, 100);
    })
    .on("mouseout", function (d) {
      if (cancelEvent(d) || d.dragging)
        return;

      mouseoutNode.call(this, d);
    })
    .call(nodeDrag);

  nodes.filter(function(d) { return d.image_url; })
    .append("div")
    .attr("class", "article-image")
    .attr("style", function (d) {
      return "background-image: url(" + d.image_url + ")";
    })

  var ellipses = nodes.append("div").attr("class", "ellipse");

  ellipses.append("h2")
    .html(function(d) {
        return d.title_truncated;     
    })
    .attr("class", "title-preview");

    node.exit().remove();   //The old nodes should be removed here
    link.exit().remove();

updateNode（）{//添加新节点

$.each(eventDict, function (c) {
        if(catEventFlag[eventDict[c].node.category].flag==2)
            collapse(this,eventDict[c].node);
    });

    function addNodes(category)
    {
        _.each(subEvents[category], function (c) {
            dataset.push(c.node);
        });    
        $.each(dataset, function (i, c) {
            if(c.className== "event-sub-label")
                processInternalNode(c);
        });

        d.thisClicked = true;
        d.fixed = true;
        runUpdate = false;

        start(true);        
        force
            .charge(chargeAlt)
            .alpha(.01)
            .start();
    }

    var category=d.category;
    d.thisClicked = true;

    if(catEventFlag[category].flag==0)
    {
        catEventFlag[category].flag=2;
        var fileName = category +'.json';
        d3.json(fileName, function(blah) {
            root = blah;

            $.each(root, function (i, dd) {
            var c=dd.event;
            subEvents[category][i] = {
                node: {
                    //Node Data
                    },
                x: xCoords[i],
                y: yCoords[i]
                };
            });
            addNodes(category);
        });
    }
    else if(catEventFlag[category].flag==1)
        addNodes(category);

和折叠（）{//用于折叠节点

var category = d.category;
catEventFlag[category].flag=1;
d.thisClicked = false;
console.log(links);

    function executeSplicing(){

    var i = links.length-1;
    while (i >=0 ) {
    console.log(i+" "+links[i].source.id);
    if (links[i].source.className == "event-sub-label")
    {
        //console.log("link?");
        links.splice(i,i+1);
    }
    i--;
    }
    nodes[0].splice(node[0].length-5); //Nodes and links Spliced already
    console.log(force.nodes());       //force.nodes() still has the old data
    return true;
    }

    start(executeSplicing());

 force.stop()
    .charge(charge)
    .alpha(.05)
    .start();

}

如果代码太混乱，请告诉我。我会尝试从中删除更多部件，使其更加简单。手头的问题是“updateNodes”函数正确添加节点，并且强制布局也获取新节点。但是在collapse函数中，节点是从“nodes”var拼接而来的，但数据不会从force.nodes（）中删除;

提前谢谢

Answer 1

只是为了确保遇到类似问题的其他人，直接得到答案！

这里，在代码中，连接到节点的数据位于var“dataset”中。因此，仅在更新“数据集”中的数据时，将使.exit（）。remove（）按照建议使用Lars Kotthoff。仅仅更新“节点”是不够的，就像我在问题中所做的那样。希望这有助于其他D3.JS初学者。

d3js - .exit（）。remove（）不会删除所有数据

1 个答案: