D3-Sankey on Angular component + Typescript

my.component.html

<h1>My page</h1>

<p>This is a simple example of an Angular component.</p>

<svg id="sankey" width="960" height="500"></svg>

my.component.ts

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
import * as d3Sankey from 'd3-sankey';

@Component({
    selector: 'my',
    templateUrl: './my.component.html'
})
export class MyComponent implements OnInit {    
    constructor() {
    };

    ngOnInit(): void {
        this.DrawChart();
    }

    private DrawChart() {

        var svg = d3.select("#sankey"),
            width = +svg.attr("width"),
            height = +svg.attr("height");

        var formatNumber = d3.format(",.0f"),
            format = function (d: any) { return formatNumber(d) + " TWh"; },
            color = d3.scaleOrdinal(d3.schemeCategory10);

        var sankey = d3Sankey.sankey()
            .nodeWidth(15)
            .nodePadding(10)
            .extent([[1, 1], [width - 1, height - 6]]);

        var link = svg.append("g")
            .attr("class", "links")
            .attr("fill", "none")
            .attr("stroke", "#000")
            .attr("stroke-opacity", 0.2)
            .selectAll("path");

        var node = svg.append("g")
            .attr("class", "nodes")
            .attr("font-family", "sans-serif")
            .attr("font-size", 10)
            .selectAll("g");

        //d3.json("./energy.json", function (error, energy: any) {
            //if (error) throw error;

        const energy: DAG = {
            nodes: [{
                nodeId: 0,
                name: "node0"
            }, {
                nodeId: 1,
                name: "node1"
            }, {
                nodeId: 2,
                name: "node2"
            }, {
                nodeId: 3,
                name: "node3"
            }, {
                nodeId: 4,
                name: "node4"
            }],
            links: [{
                source: 0,
                target: 2,
                value: 2,
                uom: 'Widget(s)'
            }, {
                source: 1,
                target: 2,
                value: 2,
                uom: 'Widget(s)'
            }, {
                source: 1,
                target: 3,
                value: 2,
                uom: 'Widget(s)'
            }, {
                source: 0,
                target: 4,
                value: 2,
                uom: 'Widget(s)'
            }, {
                source: 2,
                target: 3,
                value: 2,
                uom: 'Widget(s)'
            }, {
                source: 2,
                target: 4,
                value: 2,
                uom: 'Widget(s)'
            }, {
                source: 3,
                target: 4,
                value: 4,
                uom: 'Widget(s)'
            }]
        };


            sankey(energy);

            link = link
                .data(energy.links)
                .enter().append("path")
                .attr("d", d3Sankey.sankeyLinkHorizontal())
                .attr("stroke-width", function (d: any) { return Math.max(1, d.width); });

            link.append("title")
                .text(function (d: any) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

            node = node
                .data(energy.nodes)
                .enter().append("g");

            node.append("rect")
                .attr("x", function (d: any) { return d.x0; })
                .attr("y", function (d: any) { return d.y0; })
                .attr("height", function (d: any) { return d.y1 - d.y0; })
                .attr("width", function (d: any) { return d.x1 - d.x0; })
                .attr("fill", function (d: any) { return color(d.name.replace(/ .*/, "")); })
                .attr("stroke", "#000");

            node.append("text")
                .attr("x", function (d: any) { return d.x0 - 6; })
                .attr("y", function (d: any) { return (d.y1 + d.y0) / 2; })
                .attr("dy", "0.35em")
                .attr("text-anchor", "end")
                .text(function (d: any) { return d.name; })
                .filter(function (d: any) { return d.x0 < width / 2; })
                .attr("x", function (d: any) { return d.x1 + 6; })
                .attr("text-anchor", "start");

            node.append("title")
                .text(function (d: any) { return d.name + "\n" + format(d.value); });
        //});
    }
}

interface SNodeExtra {
    nodeId: number;
    name: string;
}

interface SLinkExtra {
    source: number;
    target: number;
    value: number;
    uom: string;
}
type SNode = d3Sankey.SankeyNode<SNodeExtra, SLinkExtra>;
type SLink = d3Sankey.SankeyLink<SNodeExtra, SLinkExtra>;

interface DAG {
    nodes: SNode[];
    links: SLink[];
}

Prerequisites.md

(It's not a file, do this before using)

1. Have D3.js v4 implement in your project first.

2. npm install --save d3-sankey

   npm install --save @types/d3-sankey

Can you please give a hint what I am doing wrong here?

https://stackoverflow.com/q/47142230/2309097

For some reason, when I try this code I don't see anything rendered... I can see the svg code in my inspector output but nothing else, no errors or warnings.

Are there any other steps required?

For this step:

"Have D3.js v4 implement in your project first."

All I did was "npm install --save d3", is there something else needed other than installing d3 v4?

@stephen-cchangelabs had a play around and I was getting the same issue as you - nothing being rendered. I removed all code after line 143 onwards in the above my.component.ts and the chart started rendering.

I had the same issue because I was not set the svg element (see my.compponent.html line 5) and for this reason the width and height of the element was 0 (my.component.ts line 20).
Otherwise the code is working fine on Angular 7, 8.

All I did was "npm install --save d3", is there something else needed other than installing d3 v4?

Remaining thing could be "npm install --save @types/d3", so the steps are:

'Prerequisites.md' (see above)

npm install --save d3
npm install --save d3-sankey

npm install --save-dev @types/d3
npm install --save-dev @types/d3-sankey