Skip to content

Commit f7c2cd0

Browse files
PierreCapoPierreCapo
committed
Use d3 submodules instead of entire d3 library
1 parent cf8273e commit f7c2cd0

34 files changed

+1305
-3448
lines changed

‎dist/index.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/typescript/d3.d.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { hierarchy, stratify, tree, treemap } from "d3-hierarchy";
2+
import { select, selectAll } from "d3-selection";
3+
import { zoom } from "d3-zoom";
4+
declare const _default: {
5+
hierarchy: typeof hierarchy;
6+
stratify: typeof stratify;
7+
tree: typeof tree;
8+
treemap: typeof treemap;
9+
select: typeof select;
10+
selectAll: typeof selectAll;
11+
event: any;
12+
zoom: typeof zoom;
13+
};
14+
export default _default;

‎dist/typescript/draw-links.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ interface ICoordinates {
33
x: number;
44
y: number;
55
}
6-
export declare const drawLinks: (s: ICoordinates, d: ICoordinates, treeConfig: ITreeConfig) => string;
6+
export declare const generateLinkLayout: (s: ICoordinates, d: ICoordinates, treeConfig: ITreeConfig) => string;
77
export {};

‎dist/typescript/link-enter.d.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
import { BaseType, HierarchyPointNode, Selection } from "d3";
1+
import { HierarchyPointNode } from "d3-hierarchy";
2+
import { BaseType, Selection } from "d3-selection";
23
import { ITreeConfig } from "./typings";
3-
export declare const placeLinkEnter: (link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, computedTree: HierarchyPointNode<{}>, settings: ITreeConfig) => Selection<SVGPathElement, HierarchyPointNode<{}>, SVGGElement, {}>;
4+
export declare const drawLinkEnter: (link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, computedTree: HierarchyPointNode<{}>, settings: ITreeConfig) => Selection<SVGPathElement, HierarchyPointNode<{}>, SVGGElement, {}>;

‎dist/typescript/link-exit.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { HierarchyPointNode } from "d3-hierarchy";
2+
import { BaseType, Selection } from "d3-selection";
3+
import { ITreeConfig } from "./typings";
4+
export declare const drawLinkExit: (link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, settings: ITreeConfig) => void;

‎dist/typescript/link-update.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { HierarchyPointNode } from "d3-hierarchy";
2+
import { BaseType, Selection } from "d3-selection";
3+
import { ITreeConfig } from "./typings";
4+
export declare const drawLinkUpdate: (linkEnter: Selection<SVGPathElement, HierarchyPointNode<{}>, SVGGElement, {}>, link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, settings: ITreeConfig) => void;

‎dist/typescript/links/draw-links.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { ITreeConfig } from "../typings";
2+
interface ICoordinates {
3+
x: number;
4+
y: number;
5+
}
6+
export declare const generateLinkLayout: (s: ICoordinates, d: ICoordinates, treeConfig: ITreeConfig) => string;
7+
export {};

‎dist/typescript/links/link-enter.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { HierarchyPointNode } from "d3-hierarchy";
2+
import { BaseType, Selection } from "d3-selection";
3+
import { ITreeConfig } from "../typings";
4+
export declare const drawLinkEnter: (link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, computedTree: HierarchyPointNode<{}>, settings: ITreeConfig) => Selection<SVGPathElement, HierarchyPointNode<{}>, SVGGElement, {}>;

‎dist/typescript/links/link-exit.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { HierarchyPointNode } from "d3-hierarchy";
2+
import { BaseType, Selection } from "d3-selection";
3+
import { ITreeConfig } from "../typings";
4+
export declare const drawLinkExit: (link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, settings: ITreeConfig) => void;

‎dist/typescript/links/link-update.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { HierarchyPointNode } from "d3-hierarchy";
2+
import { BaseType, Selection } from "d3-selection";
3+
import { ITreeConfig } from "../typings";
4+
export declare const drawLinkUpdate: (linkEnter: Selection<SVGPathElement, HierarchyPointNode<{}>, SVGGElement, {}>, link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, settings: ITreeConfig) => void;

‎dist/typescript/node-enter.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import { BaseType, Selection } from "d3";
1+
import { BaseType, Selection } from "d3-selection";
22
import { ExtendedHierarchyPointNode, ITreeConfig } from "./typings";
33
export declare const placeNodeEnter: (node: Selection<BaseType, ExtendedHierarchyPointNode, SVGGElement, {}>, settings: ITreeConfig) => Selection<SVGGElement, ExtendedHierarchyPointNode, SVGGElement, {}>;

‎dist/typescript/nodes/node-enter.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { BaseType, Selection } from "d3-selection";
2+
import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings";
3+
export declare const drawNodeEnter: (node: Selection<BaseType, ExtendedHierarchyPointNode, SVGGElement, {}>, settings: ITreeConfig) => Selection<SVGGElement, ExtendedHierarchyPointNode, SVGGElement, {}>;

‎dist/typescript/nodes/node-exit.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { BaseType, Selection } from "d3-selection";
2+
import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings";
3+
export declare const drawNodeExit: (node: Selection<BaseType, ExtendedHierarchyPointNode, SVGGElement, {}>, settings: ITreeConfig) => void;

‎dist/typescript/nodes/node-update.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { BaseType, Selection } from "d3-selection";
2+
import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings";
3+
export declare const drawNodeUpdate: (nodeEnter: Selection<SVGGElement, ExtendedHierarchyPointNode, SVGGElement, {}>, node: Selection<BaseType, ExtendedHierarchyPointNode, SVGGElement, {}>, settings: ITreeConfig) => void;

‎dist/typescript/prepare-data.d.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as d3 from "d3";
1+
import { HierarchyNode } from "d3-hierarchy";
22
import { ITreeConfig } from "./typings";
3-
export declare const generateNestedData: (data: any, treeConfig: ITreeConfig) => d3.HierarchyNode<any>;
4-
export declare const generateBasicTreemap: (treeConfig: ITreeConfig) => d3.TreeLayout<{}>;
3+
export declare const generateNestedData: (data: any, treeConfig: ITreeConfig) => HierarchyNode<any>;
4+
export declare const generateBasicTreemap: (treeConfig: ITreeConfig) => import("d3-hierarchy").TreeLayout<{}>;

‎dist/typescript/typings.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { HierarchyPointNode } from "d3";
1+
import { HierarchyPointNode } from "d3-hierarchy";
22
export interface ITreeConfig {
33
htmlID: string;
44
nodeField: string;

‎dist/typescript/utils.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export declare const getAreaSize: (htmlID: string) => {
2+
areaWidth: number;
3+
areaHeight: number;
4+
};

‎package.json

+22-24
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "treeviz",
3-
"version": "1.3.0",
3+
"version": "1.3.1",
44
"description": "Library which aims to represent trees for data visualization",
55
"keywords": [
66
"d3",
@@ -25,31 +25,29 @@
2525
"lint": "tslint src/*.ts"
2626
},
2727
"devDependencies": {
28-
"@babel/core": "^7.2.2",
29-
"@babel/preset-env": "^7.2.3",
30-
"@babel/preset-typescript": "^7.1.0",
31-
"@types/node": "^10.12.18",
32-
"@types/webpack": "^4.4.22",
33-
"@types/webpack-dev-server": "^3.1.1",
34-
"babel-loader": "^8.0.4",
28+
"@babel/core": "^7.4.3",
29+
"@babel/preset-env": "^7.4.3",
30+
"@babel/preset-typescript": "^7.3.3",
31+
"@types/node": "^11.13.0",
32+
"@types/webpack": "^4.4.27",
33+
"@types/webpack-dev-server": "^3.1.5",
34+
"babel-loader": "^8.0.5",
3535
"html-webpack-plugin": "^3.2.0",
36-
"jest": "^23.6.0",
37-
"ts-loader": "^5.3.2",
38-
"ts-node": "^7.0.1",
39-
"tslint": "^5.12.0",
40-
"tslint-config-prettier": "^1.17.0",
41-
"typescript": "^3.2.2",
42-
"webpack": "^4.28.2",
43-
"webpack-cli": "^3.1.2",
44-
"webpack-dev-server": "^3.1.14"
36+
"ts-loader": "^5.3.3",
37+
"ts-node": "^8.0.3",
38+
"tslint": "^5.15.0",
39+
"tslint-config-prettier": "^1.18.0",
40+
"typescript": "^3.4.2",
41+
"webpack": "^4.29.6",
42+
"webpack-cli": "^3.3.0",
43+
"webpack-dev-server": "^3.2.1"
4544
},
4645
"dependencies": {
47-
"@types/d3": "^5.5.0",
48-
"d3": "^5.7.0"
49-
},
50-
"jest": {
51-
"transform": {
52-
"^.+\\.jsx?$": "babel-jest"
53-
}
46+
"@types/d3-hierarchy": "^1.1.6",
47+
"@types/d3-selection": "^1.4.1",
48+
"@types/d3-zoom": "^1.7.4",
49+
"d3-hierarchy": "^1.1.8",
50+
"d3-selection": "^1.4.0",
51+
"d3-zoom": "^1.7.3"
5452
}
5553
}

‎src/d3.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { hierarchy, stratify, tree, treemap } from "d3-hierarchy";
2+
import { event, select, selectAll } from "d3-selection";
3+
import { zoom } from "d3-zoom";
4+
5+
export default {
6+
hierarchy,
7+
stratify,
8+
tree,
9+
treemap,
10+
select,
11+
selectAll,
12+
event,
13+
zoom,
14+
};

‎src/index.ts

+26-75
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import { HierarchyPointNode, Selection } from "d3";
2-
import { drawLinks } from "./draw-links";
1+
import { HierarchyPointNode } from "d3-hierarchy";
2+
import { Selection } from "d3-selection";
33
import { initiliazeSVG } from "./initializeSVG";
4-
import { placeLinkEnter } from "./link-enter";
5-
import { placeNodeEnter } from "./node-enter";
6-
import { placeExit } from "./node-exit";
4+
import { drawLinkEnter } from "./links/link-enter";
5+
import { drawLinkExit } from "./links/link-exit";
6+
import { drawLinkUpdate } from "./links/link-update";
7+
import { drawNodeEnter } from "./nodes/node-enter";
8+
import { drawNodeExit } from "./nodes/node-exit";
9+
import { drawNodeUpdate } from "./nodes/node-update";
710
import { generateBasicTreemap, generateNestedData } from "./prepare-data";
811
import { ExtendedHierarchyPointNode, ITreeConfig } from "./typings";
912

@@ -35,11 +38,11 @@ export function create(userSettings: Partial<ITreeConfig>) {
3538
};
3639
const settings: ITreeConfig = { ...defaultSettings, ...userSettings };
3740
let oldPosition: Array<{ x0?: number; y0?: number; id?: string }> = [];
41+
3842
function draw(
3943
svg: Selection<SVGGElement, {}, HTMLElement, any>,
4044
computedTree: HierarchyPointNode<{}>
4145
) {
42-
const duration = 400;
4346
const nodes = computedTree.descendants() as ExtendedHierarchyPointNode[];
4447
const links = computedTree.descendants().slice(1);
4548

@@ -51,18 +54,20 @@ export function create(userSettings: Partial<ITreeConfig>) {
5154
});
5255
}
5356

54-
nodes.forEach((el: ExtendedHierarchyPointNode) => {
55-
el.x0 = {
56-
...el,
57+
nodes.forEach((currentNode: ExtendedHierarchyPointNode) => {
58+
currentNode.x0 = {
59+
...currentNode,
5760
x0: undefined,
5861
y0: undefined,
59-
...oldPosition.filter(toto => toto.id === el.id)[0],
62+
// @ts-ignore
63+
...oldPosition.filter(oldNode => oldNode.id === currentNode.id)[0],
6064
}.x0;
61-
el.y0 = {
62-
...el,
65+
currentNode.y0 = {
66+
...currentNode,
6367
x0: undefined,
6468
y0: undefined,
65-
...oldPosition.filter(toto => toto.id === el.id)[0],
69+
// @ts-ignore
70+
...oldPosition.filter(oldNode => oldNode.id === currentNode.id)[0],
6671
}.y0;
6772
});
6873

@@ -71,73 +76,19 @@ export function create(userSettings: Partial<ITreeConfig>) {
7176
return d[settings.nodeField];
7277
});
7378

74-
const nodeEnter = placeNodeEnter(node, settings);
75-
76-
nodeEnter
77-
.append("rect")
78-
.attr("class", "node")
79-
.attr("rx", 5)
80-
.attr("ry", 5)
81-
.attr("width", settings.nodeWidth)
82-
.attr("height", settings.nodeHeight)
83-
.style("fill", ({ data }: { data: any }) => settings.nodeColor(data))
84-
.style("cursor", "pointer")
85-
.on("click", settings.onNodeClick)
86-
.on("mouseenter", settings.onNodeMouseEnter)
87-
.on("mouseleave", settings.onNodeMouseLeave);
88-
89-
nodeEnter
90-
.append("foreignObject")
91-
.attr("width", settings.nodeWidth)
92-
.attr("height", settings.nodeHeight)
93-
.style("pointer-events", "none")
94-
.html(({ data }: { data: any }) => settings.nodeTemplate(data)); // settings.nodeTemplate(data));
95-
96-
// @ts-ignore
97-
const nodeUpdate = nodeEnter.merge(node);
98-
99-
nodeUpdate
100-
.transition()
101-
.duration(duration)
102-
.attr("transform", (d: any) => {
103-
return settings.horizontalLayout
104-
? "translate(" + d.y + "," + d.x + ")"
105-
: "translate(" + d.x + "," + d.y + ")";
106-
});
107-
108-
const nodeExit = placeExit(node, settings);
109-
nodeExit.select("rect").style("fill-opacity", 1e-6);
110-
nodeExit.select("circle").attr("r", 1e-6);
111-
nodeExit.select("text").style("fill-opacity", 1e-6);
79+
const nodeEnter = drawNodeEnter(node, settings);
80+
drawNodeUpdate(nodeEnter, node, settings);
81+
drawNodeExit(node, settings);
11282

11383
// ****************** links section ***************************
11484

11585
const link = svg.selectAll("path.link").data(links, (d: any) => {
11686
return d.id;
11787
});
11888

119-
const linkEnter = placeLinkEnter(link, computedTree, settings);
120-
121-
// @ts-ignore
122-
const linkUpdate = linkEnter.merge(link);
123-
124-
linkUpdate
125-
.transition()
126-
.duration(duration)
127-
.attr("d", (d: any) => {
128-
return drawLinks(d, d.parent, settings);
129-
});
130-
131-
const linkExit = link
132-
.exit()
133-
.transition()
134-
.duration(duration)
135-
.attr("d", (d: any) => {
136-
const o = { x: d.ancestors()[1].x0, y: d.ancestors()[1].y0 };
137-
return drawLinks(o, o, settings);
138-
})
139-
.remove();
140-
linkExit.select(".link").attr("stroke-opacity", 1e-6);
89+
const linkEnter = drawLinkEnter(link, computedTree, settings);
90+
drawLinkUpdate(linkEnter, link, settings);
91+
drawLinkExit(link, settings);
14192

14293
nodes.forEach((d: any, index: any) => {
14394
oldPosition[index] = { x0: d.x, y0: d.y, id: d.id };
@@ -163,8 +114,8 @@ export function create(userSettings: Partial<ITreeConfig>) {
163114
oldPosition = [];
164115
}
165116

166-
const obj = { refresh, clean };
117+
const treeObject = { refresh, clean };
167118

168119
const svg = initiliazeSVG(settings);
169-
return obj;
120+
return treeObject;
170121
}

‎src/initializeSVG.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import * as d3 from "d3";
2-
import { getAreaSize } from "./services";
1+
import d3 from "./d3";
32
import { ITreeConfig } from "./typings";
3+
import { getAreaSize } from "./utils";
44

55
export const initiliazeSVG = (treeConfig: ITreeConfig) => {
66
const {

‎src/draw-links.ts renamed to ‎src/links/draw-links.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { ITreeConfig } from "./typings";
1+
import { ITreeConfig } from "../typings";
22

33
interface ICoordinates {
44
x: number;
55
y: number;
66
}
77

8-
export const drawLinks = (
8+
export const generateLinkLayout = (
99
s: ICoordinates,
1010
d: ICoordinates,
1111
treeConfig: ITreeConfig

‎src/link-enter.ts renamed to ‎src/links/link-enter.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { BaseType, HierarchyPointNode, Selection } from "d3";
2-
import { drawLinks } from "./draw-links";
3-
import { ITreeConfig } from "./typings";
1+
import { HierarchyPointNode } from "d3-hierarchy";
2+
import { BaseType, Selection } from "d3-selection";
3+
import { ITreeConfig } from "../typings";
4+
import { generateLinkLayout } from "./draw-links";
45

5-
export const placeLinkEnter = (
6+
export const drawLinkEnter = (
67
link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>,
78
computedTree: HierarchyPointNode<{}>,
89
settings: ITreeConfig
@@ -17,7 +18,7 @@ export const placeLinkEnter = (
1718
typeof d.ancestors()[1].x0 !== "undefined"
1819
? { x: d.ancestors()[1].x0, y: d.ancestors()[1].y0 }
1920
: { x: computedTree.x, y: computedTree.y };
20-
return drawLinks(o, o, settings);
21+
return generateLinkLayout(o, o, settings);
2122
})
2223
.attr("fill", "none")
2324
.attr("stroke-width", ({ data }: { data: any }) => settings.linkWidth(data))

‎src/links/link-exit.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { HierarchyPointNode } from "d3-hierarchy";
2+
import { BaseType, Selection } from "d3-selection";
3+
import { ITreeConfig } from "../typings";
4+
import { generateLinkLayout } from "./draw-links";
5+
6+
export const drawLinkExit = (
7+
link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>,
8+
settings: ITreeConfig
9+
) => {
10+
const linkExit = link
11+
.exit()
12+
.transition()
13+
.duration(settings.duration)
14+
.attr("d", (d: any) => {
15+
const o = { x: d.ancestors()[1].x0, y: d.ancestors()[1].y0 };
16+
return generateLinkLayout(o, o, settings);
17+
})
18+
.remove();
19+
linkExit.select(".link").attr("stroke-opacity", 1e-6);
20+
};

0 commit comments

Comments
 (0)