javascript - D3 可视化 - 在 ngOnChanges 中更新(Angular/TypeScript)

Question

我正在使用this d3 bl.ocks example在 my Angular project ，尽管我正在尝试更新 onChanges 数据而不是在 buildViz 函数内部。我在下面的示例中通过在 ngOnInit 中设置间隔来模拟这一点。

我收到一条错误，指出找不到节点数据(错误 TypeError:无法读取未定义的属性“数据”)。我猜测这是因为该函数是在 buildViz 函数本身之外调用的，尽管传入节点和链接似乎没有解决问题。有什么想法吗？

错误来 self 的重启函数中的这一行:

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

工作代码:StackBlitz

我的代码:

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 是一个生命周期钩子(Hook)，当输入更改时触发(输入作为 Angular 输入，带有 @Input 装饰器)。

我真的不知道你的目标，所以我不能给你一个解决方案，但至少我可以告诉你为什么它不起作用。

至于你的错误，你这样写:

  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());

当您在函数中使用 this 关键字时，它引用该函数，而不是您的组件。要纠正这个问题，请改用它:

  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());

这是粗箭头表示法，您应该查看 Google 以获取更多相关信息。

对于其他函数，例如function restart(nodes, links)，您应该编写restart = (nodes, links) => {...}如果您想将 this 的上下文保留到您的类(class)。