(It's not a file, do this before using)
-
Have D3.js v4 implement in your project first.
-
npm install --save d3-sankey
npm install --save @types/d3-sankey
Last active
October 1, 2024 10:23
-
-
Save MagicJohnJang/3cde82004e632e66b0fc5c156a7c16e9 to your computer and use it in GitHub Desktop.
D3-Sankey on Angular component + Typescript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>My page</h1> | |
| <p>This is a simple example of an Angular component.</p> | |
| <svg id="sankey" width="960" height="500"></svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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[]; | |
| } |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can you please give a hint what I am doing wrong here?
https://stackoverflow.com/q/47142230/2309097