Ошибка D3.js при получении данных из HTTPRequest с Angular - PullRequest
Новая
       12

Ошибка D3.js при получении данных из HTTPRequest с Angular

0 голосов
/ 02 декабря 2018

Я хочу пользователя D3.JS с Angular.Мой проект работает с данными brut, но когда я получаю данные с сервера Http, у меня появляется ошибка.

Мой элемент отображается, но у меня есть ошибка в консоли.

Я вызываю это в конструкторе для полученияdata. 

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;
}

My 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".
...