Question

我希望使用Angular的用户D3.JS。我的项目使用的是brut数据，但是当我从Http服务器获取数据时出现错误。

显示了我的元素，但控制台中出现错误。

我在构造函数上调用它以获取数据。

this.httpService.node.subscribe(item => {
      this.listNoeud = item;
      for (let i = 0; i < this.listNoeud.length; i++) {
          this.nodes.push(new NodeGraph(this.listNoeud[i].id, this.listNoeud[i].label, this.listNoeud[i].type, this.listNoeud[i].statut));
          for (let c = 0; c < this.listNoeud[i].enfants.length; c++){
              this.links.push(new LinkGraph(this.listNoeud[i].id, this.listNoeud[i].enfants[c]));
          }
      }

      this.d3Service.getForceDirectedGraph(this.nodes, this.links, this.options);
  });

这是我的d3Service.getForcedDirectedGraph方法

getForceDirectedGraph(nodes: NodeGraph[], links: LinkGraph[], options: { width, height }) {
    const sg = new ForceDirectedGraph(nodes, links, options);
    return sg;
}

我的ForcedDirectedGraph。它用于初始化d3并将属性赋予我的元素。我认为问题就在这里。我认为d3初始化模拟时不会刷新我的数据。

const FORCES = {
LINKS: 1 / 50,
COLLISION: 1,
CHARGE: -1
}

export class ForceDirectedGraph {
public ticker: EventEmitter<d3.Simulation<NodeGraph, LinkGraph>> = new EventEmitter();
public simulation: d3.Simulation<any, any>;

public nodes: NodeGraph[] = [];
public links: LinkGraph[] = [];

constructor(nodes, links, options: { width, height }) {
    this.nodes = nodes;
    this.links = links;

    this.initSimulation(options);
}

connectNodes(source, target) {
    let link;

    if (!this.nodes[source] || !this.nodes[target]) {
        throw new Error('One of the nodes does not exist');
    }

    link = new LinkGraph(source, target);
    this.simulation.stop();
    this.links.push(link);
    this.simulation.alphaTarget(0.3).restart();

    this.initLinks();
}

initNodes() {
    if (!this.simulation) {
        throw new Error('simulation was not initialized yet');
    }

    console.error(this.nodes);

    this.simulation.nodes(this.nodes);
}

initLinks() {
    if (!this.simulation) {
        throw new Error('simulation was not initialized yet');
    }

    console.error(this.links);

    this.simulation.force('links',
        d3.forceLink(this.links)
            .id(d => d['id'])
            .strength(FORCES.LINKS)
    );
}

initSimulation(options) {
    if (!options || !options.width || !options.height) {
        throw new Error('missing options when initializing simulation');
    }

    /** Creating the simulation */
    if (!this.simulation) {
        const ticker = this.ticker;

        this.simulation = d3.forceSimulation()
            .force('charge',
                d3.forceManyBody()
                    .strength(d => FORCES.CHARGE * d['r'])
            )
            .force('collide',
                d3.forceCollide()
                    .strength(FORCES.COLLISION)
                    .radius(d => d['r'] + 5).iterations(2)
            );

        // Connecting the d3 ticker to an angular event emitter
        this.simulation.on('tick', function () {
            ticker.emit(this);
        });

        this.initNodes();
        this.initLinks();
    }


    /** Updating the central force of the simulation */
    this.simulation.force('centers', d3.forceCenter(options.width / 2, options.height / 2));

    /** Restarting the simulation internal timer */
    this.simulation.restart();
}
}

但是当我显示时，我有：

Error: <line> attribute x1: Expected length, "NaN".

使用Angular从HTTPRequest获取数据时出现D3.js错误

0 个答案: