在D3中构建和显示DAG(有向无环图)

问题描述 投票:0回答:1

我正在使用dagConnect使用d3-dag构建DAG的可视化表示。我认为我的边缘数据格式正确,但dagConnect不会返回填充的DAG。我得到一个错误TypeError:在严格模式函数或调用它们的参数对象上可能无法访问'caller','callee'和'arguments'属性

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';
import * as d3dag from'd3-dag';


//Defines an interface to pairs of links
interface LinkPairs {
  source: string;
  target: string;
}



@Component({
  selector: 'app-dag',
  encapsulation: ViewEncapsulation.None,  // Stops Angular from renaming class names in the CSS.
  // D3 generates it's own HTML which Angular doesn't know
  // about, so there is a mismatch between class names
  templateUrl: './dag.component.html',
  styleUrls: ['./dag.component.scss']
})
export class DagComponent implements OnInit {


  // Declare and initialise array of tree data
  private linkPairs: LinkPairs[] = [];

  myDag: any;

  constructor() { 

        // Populate 'this.linkPairs' with data

        this.prepareData();

        this.renderDag();
  }

  ngOnInit() {
  }

  prepareData() {

    this.linkPairs.push({source : "1" , target:  "3"});
    this.linkPairs.push({source : "2" , target:  "3"});
    this.linkPairs.push({source : "3" , target:  "4"});
    this.linkPairs.push({source : "4" , target:  "5"});


    console.log(this.linkPairs);

    this.myDag = d3dag.dagConnect(this.linkPairs);

    console.log(this.myDag);

  }
angular typescript d3.js
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.