I am a beginner in Typescript and Angular 2. My goal is to create an Angular2 component that incorporates a d3js tool click here. However, I am facing challenges when it comes to converting it to Typescript.
For instance, I am unsure if this code rewrite is the correct approach:
Original code snippet from d3js:
var GraphCreator = function(svg, nodes, edges){
var thisGraph = this;
thisGraph.idct = 0;
thisGraph.nodes = nodes || [];
thisGraph.edges = edges || [];
// More code goes here...
My attempt at rewriting the code to Typescript(Angular2):
import * as D3 from 'd3';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app works!';
private graphCreator : any;
// More code goes here...
Despite my efforts, the code does not render properly and throws an error related to undefined variables. Specifically, the error "EXCEPTION: this.graphCreator is undefined" occurs when triggering keyboard events.
I suspect there might be an issue with how I am implementing the functionality. Can anyone point me in the right direction on how to correctly utilize this type of function in Typescript?
svg.on("mousedown", function(d){thisGraph.svgMouseDown.call(thisGraph, d);});
Thank you for your assistance and apologies for the multitude of queries.