0

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

  }
Erik
  • 6,470
  • 5
  • 36
  • 37
Richard Jacobs
  • 5
  • 1
  • 6

1 Answers1

1

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);
Erik
  • 6,470
  • 5
  • 36
  • 37
  • Hi Erik. Thanks for looking at this. Tried your code but I'm now getting:- _Error: Uncaught (in promise): Error: no roots_ – Richard Jacobs Apr 16 '19 at 16:01
  • @RichardJacobs I'm not sure what to say. It works on my end: https://observablehq.com/@erikbrinkman/untitled – Erik Apr 17 '19 at 22:54