Struggling with D3.js Angular CLI where Scope disappears within the tick() function?

Question

Struggling with D3.js Angular CLI where Scope disappears within the tick() function?

Hey everyone, I'm currently in the process of incorporating a D3 visualization network graph into an Angular CLI project (http://bl.ocks.org/mbostock/1153292) using the ng2-nvd3 component.

Here's the Angular component:

import { Component, OnInit } from '@angular/core';
declare let d3: any;

@Component({
  selector: 'app-visual',
  templateUrl: './visual.component.html',
  styleUrls: ['./visual.component.css']
})
export class VisualComponent implements OnInit {
   private links = [
    // List of link data
  ];
  private nodes: Array<Object> = [];
  private width = 960;
  private height = 500;
  private force: any;
  public svg: any;
  private path: any;
  private circle: any;
  private text: any;

  constructor(/*d3Service: D3Service*/) {
    // this.d3 = d3Service.getD3();
  }



ngOnInit() {
    // let d3 = this.d3;
    this.computeLinks(this.nodes);
    this.forceLayout();
    this.appendGraph();
  }

  computeLinks(nodes) {
    // Function to compute distinct nodes from links.
  }


  forceLayout() {
    // Function for force layout
  }

  appendGraph() {
    // Function to append graph elements
  }
  tick() {
    // Function to handle ticks
  }

  linkArc(d) {
    // Function for generating links between nodes
  }

  transform(d) {
    // Function for transforming node positions
  }
}

Error message

ERROR TypeError: Cannot read property 'attr' of undefined
at d3_dispatch.VisualComponent.tick (visual.component.ts:124)
at d3_dispatch.event [as tick] (d3.js:504)
at Object.force.tick [as c] (d3.js:6307)
at d3_timer_mark (d3.js:2166)
at d3_timer_step (d3.js:2147)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4747)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at ZoneTask.invokeTask (zone.js:499)

Upon loading the web application, the graph is not visible: Snapshot of generated graph

Debugging by logging this.path in the tick() method returns undefined even though it was created in the appendGraph() method.

javascript angularjs d3.js graph angular-cli

Answer 1

Answer №1

This is a different take on handling "setTimeout() inside JavaScript Class using “this”". In this scenario, D3's force layout relies on setTimeout() to manage its ticks, leading to issues with the scope of your tick() function when it runs.

You can see an example demonstrating this problem in action on JSFiddle.

In contrast to the previous question linked above, where you called setTimeout() in your own code, here D3 itself makes the call. This means utilizing a closure to maintain the necessary scope within your tick() method:

tick() {
  let self = this;     // capturing 'this' in a closure
  return function() {
    // 'self' retains reference to the class instance
    self.path.attr("d", self.linkArc);
    self.circle.attr("transform", self.transform);
    self.text.attr("transform", self.transform);
  }
}

In addition to these adjustments, you should ensure that the force layout initialization correctly invokes .tick() as a generator, returning the actual tick handler function that maintains the class instance's scope through this:

forceLayout() {
  this.force = d3.layout.force()
    //...details omitted for brevity
    .on("tick", this.tick())   // Note the parentheses after tick
    .start();
}

A fully functional demo showcasing these solutions can be found in this JSFiddle.

Answer 2

This is a different take on handling "setTimeout() inside JavaScript Class using “this”". In this scenario, D3's force layout relies on setTimeout() to manage its ticks, leading to issues with the scope of your tick() function when it runs.

You can see an example demonstrating this problem in action on JSFiddle.

In contrast to the previous question linked above, where you called setTimeout() in your own code, here D3 itself makes the call. This means utilizing a closure to maintain the necessary scope within your tick() method:

tick() {
  let self = this;     // capturing 'this' in a closure
  return function() {
    // 'self' retains reference to the class instance
    self.path.attr("d", self.linkArc);
    self.circle.attr("transform", self.transform);
    self.text.attr("transform", self.transform);
  }
}

In addition to these adjustments, you should ensure that the force layout initialization correctly invokes .tick() as a generator, returning the actual tick handler function that maintains the class instance's scope through this:

forceLayout() {
  this.force = d3.layout.force()
    //...details omitted for brevity
    .on("tick", this.tick())   // Note the parentheses after tick
    .start();
}

A fully functional demo showcasing these solutions can be found in this JSFiddle.

Struggling with D3.js Angular CLI where Scope disappears within the tick() function?

Answer №1

Similar questions

The issue of not being able to use res.flush as a function in Express-sse is

What is the method to display a caret in regular HTML text with the use of JavaScript?

Manipulate JSON insertions and character replacements using JavaScript or Python

Encountering a problem with Firebase while offline. The error message "FirebaseError: Firebase App named '[DEFAULT]' already exists with different options or config." is appearing

Debugging Node.js Routes in Visual Studio Code: A Step-by-Step Guide

The div has extra white space at the bottom due to the Hide/Show content feature

Add integer to an array of strings

Can Vue.js be paired with pure Node.js as a backend without relying on Express?

Can someone help me understand how to show nested values within an ng-repeat loop

Is it possible to edit YouTube images or embed YouTube iframes without needing an account?

I am encountering the ERR_STREAM_WRITE_AFTER_END error in my Node.js API. Does anyone know how to resolve this problem?

Navigating through pages using Nuxt UI-pagination

Exploring ways to specifically select predefined strings by defining a regex parameter in angular-ui-router

Ensuring radio button validation prior to redirecting to contact form

What is the best way to utilize URL parameters to dynamically update a component's state within a class component

Guide to activating the timer specifically on select pages with jQuery Mobile

Troubleshooting: Why is $watch failing to track changes on factory variables in Angular

Trouble altering an attribute using jquery

TABULAOTR, The complete table calculation is failing to be retrieved

Getting the total number of child elements in a web page using Selenium web-driver with Node.js