CODEWITHSUNDEEP
angulartypescriptd3.jsd3-dag
Richard Jacobs
Richard Jacobs

Reputation: 25

Building and displaying a DAG (directed acyclic graph) in D3

I am building a visual representation of a DAG using d3-dag using dagConnect. I think I have the edge data in the correct format but dagConnect doesn't return a populated DAG. I get an error TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

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

  }

Upvotes: 0

Views: 1580

Answers (1)

Erik
Erik

Reputation: 7342

It looks like you're passing the data to the constructor argument, instead of creating the dagConnector, and then modifying it. It also looks like your passing links as source-target. Fixing both yields:

d3dag.dagConnect()
  .sourceAccessor(l => l.source)
  .targetAccessor(l => l.target)
  (this.linkPairs);

Upvotes: 1

Related Questions