d3. js v5 Старый график завис при обновлении данных - PullRequest
Новая
       12

d3. js v5 Старый график завис при обновлении данных

0 голосов
/ 26 мая 2020

Я хотел добавить новый узел к графику двойным щелчком. Новый узел должен быть связан с существующим узлом, на котором щелкнули мышью. После обновления появится новый график с новым узлом. Но все же старый график кажется застывшим на заднем плане. Я не могу найти способ удалить этот старый график.

Вот моя функция обновления: 

update(){
this.link = this.svg               
      .selectAll(".link")
      .data(this.data.links, function (d){return d.target.id})

    var linkEnter=this.link.enter()
      .append("line").style("stroke", "#aaa")
      .attr("class", "links");

      linkEnter.append("title")
      .text(function (d){return d.type})

    this.link = this.link.merge(linkEnter);
    this.link.exit().remove();

    this.node = this.svg.selectAll(".node")
      .data(this.data.nodes, function (d){return d.id})

  var nodeEnter= this.node.enter().append("circle")
      .attr("r", (d) => {return this.rad})

      nodeEnter.style("fill","black")             //stylings
      .style("stroke-width", this.nodeborder)
      .style("stroke", (d) => { return this.color(d.group); })

      nodeEnter.on('dblclick', this.nodeDoubleClick);
      nodeEnter.call(d3.drag()
        .on("start", this.dragstarted)
        .on("drag", this.dragged)
        .on("end", this.dragended));

    this.node=this.node.merge(nodeEnter);
    this.node.exit().remove();


    this.text = this.svg.selectAll("text").data(this.data.nodes); // displays node-name

  var textEnter=this.text.enter().append("text")
       .data(this.data.nodes, function (d){return d.name})
       .text(function (d) {return d.name });

    this.text=this.text.merge(textEnter);

    this.text.exit().remove();

    this.linkText = this.svg.selectAll("links").data(this.data.links, function (d){ return d.type}); // displays link-type

    var linkTextEnter=this.linkText.enter().append("text")
      .style("fill", "#999")
      .text(function (d) { return d.type }); // get link text from data

      this.linkText=this.linkText.merge(linkTextEnter); 

      this.linkText.exit().remove();


    this.simulation.nodes(this.data.nodes);
    this.simulation.force("link").links(this.data.links);
}

И моя функция выполняется по двойному щелчку: 

 nodeDoubleClick=(d)=> {
  this.index++;

    const newNode = {  "name": "neighbor"+ this.index, "group": 8 };
    this.data.nodes.push(newNode);
    this.data.links.push({ "source": d.id, "target": newNode, "type": "testclick" })

    this.update();

  }
``
...