D3可视化-更新ngOnChanges（Angular / TypeScript）

Question

I'm using this d3 bl.ocks example in my Angular project , though I'm trying to update the data onChanges instead of inside the buildViz function. I've mocked this in the example below by setting an interval in ngOnInit.

I'm getting an error that it can't find the node data ( ERROR TypeError: Cannot read property 'data' of undefined ). I'm guessing this is because the function is being called outside of buildViz function itself, though passing in the nodes and links did not seem to resolve the issue. Any thoughts?

Error is coming from this line in my restart function:

node = node.data(_this.nodes, function (d) { return d.id; });

Working Code: StackBlitz

My code:

import { Component, Input, OnInit, ElementRef } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'd3-viz',
  templateUrl: './d3-viz.html'
})
export class D3Viz {

  private host;

  width: number = 750;
  height: number = 500;

  a = { id: "a" };
    b = { id: "b" };
    c = { id: "c" };

  links = [
    { source: this.a, target: this.b },
    { source: this.b, target: this.c },
    { source: this.c, target: this.a }
  ];

  nodes = [this.a, this.b, this.c];

  constructor(private element: ElementRef) {
    this.host = d3.select(this.element.nativeElement);
  }

  ngOnInit() {
    this.buildViz();

      d3.interval(() => {
        this.nodes.pop(); // Remove c.
        this.links.pop(); // Remove c-a.
        this.links.pop(); // Remove b-c.
        this.buildViz('update');
      }, 2000, d3.now());

      d3.interval(() => {
        this.nodes.push(this.c);
        this.links.push({ source: this.b, target: this.c });
        this.links.push({ source: this.c, target: this.a });
        this.buildViz('update');
      }, 2000, d3.now() + 1000);

  }

    buildViz(update?) {

      let svg = this.host.append('svg')
        .attr('width', this.width)
        .attr('height', this.height);
      let color = d3.scaleOrdinal(d3.schemeCategory10);


      if(!update){

      var simulation = d3.forceSimulation<any>(this.nodes)
        .force("charge", d3.forceManyBody().strength(-1000))
        .force("link", d3.forceLink(this.links).distance(200))
        .force("x", d3.forceX())
        .force("y", d3.forceY())
        .alphaTarget(1)
        .on("tick", ticked);

      var g = svg.append("g").attr("transform", "translate(" + this.width / 2 + "," + this.height / 2 + ")"),
        link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
        node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");

    }



      var restart = () => {

        // Apply the general update pattern to the nodes.
        node = node.data(this.nodes, function (d: any) { return d.id; });
        node.exit().remove();
        node = node.enter().append("circle").attr("fill", function (d: any) { return color(d.id); }).attr("r", 8).merge(node);

        // Apply the general update pattern to the links.
        link = link.data(this.links, function (d) { return d.source.id + "-" + d.target.id; });
        link.exit().remove();
        link = link.enter().append("line").merge(link);

        // Update and restart the simulation.
        simulation.nodes(this.nodes);
        simulation.force<any>("link").links(this.links);
        simulation.alpha(1).restart();
      }
      restart();


      function ticked() {
        node.attr("cx", function (d: any) { return d.x; })
          .attr("cy", function (d: any) { return d.y; })

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

}

Answer 1

ngOnChanges is a lifecycle hook that is triggered when an Input changes (input as an Angular input, with an @Input decorator).

I don't really know your goal there, so I can't give you a solution, but at least I can tell you why it is not working.

As for your error, you write this :

  d3.interval(function () {
    this.nodes.pop(); // Remove c.
    this.links.pop(); // Remove c-a.
    this.links.pop(); // Remove b-c.
    this.buildViz(this.nodes, this.links, 'update');
  }, 2000, d3.now());

When you use the this keyword in a function, it references the function, not your component. To correct that, use this instead :

  d3.interval(() => {
    this.nodes.pop(); // Remove c.
    this.links.pop(); // Remove c-a.
    this.links.pop(); // Remove b-c.
    this.buildViz(this.nodes, this.links, 'update');
  }, 2000, d3.now());

this is the fat arrow notation, you should check out Google for more information about that.

And for other functions, such as function restart(nodes, links) , you should write it restart = (nodes, links) => {...} if you want to keep the context of this bound to your class.