Sample Node(id=${d.id}), override using
+ `;
+ },
+ connectionsUpdate: function (d, i, arr) {
+ d3.select(this)
+ .attr('stroke', (d) => '#152785')
+ .attr('stroke-linecap', 'round')
+ .attr('stroke-width', (d) => '5')
+ .attr('pointer-events', 'none')
+ .attr('marker-start', (d) => `url(#${d.from + '_' + d.to})`)
+ .attr('marker-end', (d) => `url(#arrow-${d.from + '_' + d.to})`);
+ },
+ linkUpdate: function (d, i, arr) {
+ d3.select(this)
+ .attr('stroke', (d) =>
+ d.data._upToTheRootHighlighted ? '#152785' : 'lightgray',
+ )
+ .attr('stroke-width', (d) =>
+ d.data._upToTheRootHighlighted ? 5 : 2,
+ );
+
+ if (d.data._upToTheRootHighlighted) {
+ d3.select(this).raise();
+ }
+ },
+ nodeUpdate: function (d, i, arr) {
+ d3.select(this)
+ .select('.node-rect')
+ .attr('stroke', (d) =>
+ d.data._highlighted || d.data._upToTheRootHighlighted
+ ? '#152785'
+ : 'none',
+ )
+ .attr(
+ 'stroke-width',
+ d.data._highlighted || d.data._upToTheRootHighlighted ? 10 : 1,
+ );
+ },
+
+ nodeWidth: (d3Node) => 250,
+ nodeHeight: (d) => 150,
+ siblingsMargin: (d3Node) => 20,
+ childrenMargin: (d) => 60,
+ neightbourMargin: (n1, n2) => 80,
+ compactMarginPair: (d) => 100,
+ compactMarginBetween: (d3Node) => 20,
+ onNodeClick: (d) => d,
+ linkGroupArc: d3
+ .linkHorizontal()
+ .x((d) => d.x)
+ .y((d) => d.y),
+ // ({ source, target }) => {
+ // return
+ // return `M ${source.x} , ${source.y} Q ${(source.x + target.x) / 2 + 100},${source.y-100} ${target.x}, ${target.y}`;
+ // },
+ nodeContent: (
+ d,
+ ) => `
Sample Node(id=${d.id}), override using
chart
.nodeContent({data}=>{
return '' // Custom HTML
})
Or check different
layout examples
-
-
`,
- layout: "top",// top, left,right, bottom
- buttonContent: ({ node, state }) => {
- const icons = {
- "left": d => d ? `
‹
` : `
›
`,
- "bottom": d => d ? `
ˬ
` : `
ˆ
`,
- "right": d => d ? `
›
` : `
‹
`,
- "top": d => d ? `
ˆ
` : `
ˬ
`,
- }
- return `
${icons[state.layout](node.children)}
`
- },
- layoutBindings: {
- "left": {
- "nodeLeftX": node => 0,
- "nodeRightX": node => node.width,
- "nodeTopY": node => - node.height / 2,
- "nodeBottomY": node => node.height / 2,
- "nodeJoinX": node => node.x + node.width,
- "nodeJoinY": node => node.y - node.height / 2,
- "linkJoinX": node => node.x + node.width,
- "linkJoinY": node => node.y,
- "linkX": node => node.x,
- "linkY": node => node.y,
- "linkCompactXStart": node => node.x + node.width / 2,//node.x + (node.compactEven ? node.width / 2 : -node.width / 2),
- "linkCompactYStart": node => node.y + (node.compactEven ? node.height / 2 : -node.height / 2),
- "compactLinkMidX": (node, state) => node.firstCompactNode.x,// node.firstCompactNode.x + node.firstCompactNode.flexCompactDim[0] / 4 + state.compactMarginPair(node) / 4,
- "compactLinkMidY": (node, state) => node.firstCompactNode.y + node.firstCompactNode.flexCompactDim[0] / 4 + state.compactMarginPair(node) / 4,
- "linkParentX": node => node.parent.x + node.parent.width,
- "linkParentY": node => node.parent.y,
- "buttonX": node => node.width,
- "buttonY": node => node.height / 2,
- "centerTransform": ({ root, rootMargin, centerY, scale, centerX }) => `translate(${rootMargin},${centerY}) scale(${scale})`,
- "compactDimension": {
- sizeColumn: node => node.height,
- sizeRow: node => node.width,
- reverse: arr => arr.slice().reverse()
- },
- "nodeFlexSize": ({ height, width, siblingsMargin, childrenMargin, state, node }) => {
- if (state.compact && node.flexCompactDim) {
- const result = [node.flexCompactDim[0], node.flexCompactDim[1]]
- return result;
- };
- return [height + siblingsMargin, width + childrenMargin]
- },
- "zoomTransform": ({ centerY, scale }) => `translate(${0},${centerY}) scale(${scale})`,
- "diagonal": this.hdiagonal.bind(this),
- "swap": d => { const x = d.x; d.x = d.y; d.y = x; },
- "nodeUpdateTransform": ({ x, y, width, height }) => `translate(${x},${y - height / 2})`,
- },
- "top": {
- "nodeLeftX": node => -node.width / 2,
- "nodeRightX": node => node.width / 2,
- "nodeTopY": node => 0,
- "nodeBottomY": node => node.height,
- "nodeJoinX": node => node.x - node.width / 2,
- "nodeJoinY": node => node.y + node.height,
- "linkJoinX": node => node.x,
- "linkJoinY": node => node.y + node.height,
- "linkCompactXStart": node => node.x + (node.compactEven ? node.width / 2 : -node.width / 2),
- "linkCompactYStart": node => node.y + node.height / 2,
- "compactLinkMidX": (node, state) => node.firstCompactNode.x + node.firstCompactNode.flexCompactDim[0] / 4 + state.compactMarginPair(node) / 4,
- "compactLinkMidY": node => node.firstCompactNode.y,
- "compactDimension": {
- sizeColumn: node => node.width,
- sizeRow: node => node.height,
- reverse: arr => arr,
- },
- "linkX": node => node.x,
- "linkY": node => node.y,
- "linkParentX": node => node.parent.x,
- "linkParentY": node => node.parent.y + node.parent.height,
- "buttonX": node => node.width / 2,
- "buttonY": node => node.height,
- "centerTransform": ({ root, rootMargin, centerY, scale, centerX }) => `translate(${centerX},${rootMargin}) scale(${scale})`,
- "nodeFlexSize": ({ height, width, siblingsMargin, childrenMargin, state, node, compactViewIndex }) => {
- if (state.compact && node.flexCompactDim) {
- const result = [node.flexCompactDim[0], node.flexCompactDim[1]]
- return result;
- };
- return [width + siblingsMargin, height + childrenMargin];
- },
- "zoomTransform": ({ centerX, scale }) => `translate(${centerX},0}) scale(${scale})`,
- "diagonal": this.diagonal.bind(this),
- "swap": d => { },
- "nodeUpdateTransform": ({ x, y, width, height }) => `translate(${x - width / 2},${y})`,
-
- },
- "bottom": {
- "nodeLeftX": node => -node.width / 2,
- "nodeRightX": node => node.width / 2,
- "nodeTopY": node => -node.height,
- "nodeBottomY": node => 0,
- "nodeJoinX": node => node.x - node.width / 2,
- "nodeJoinY": node => node.y - node.height - node.height,
- "linkJoinX": node => node.x,
- "linkJoinY": node => node.y - node.height,
- "linkCompactXStart": node => node.x + (node.compactEven ? node.width / 2 : -node.width / 2),
- "linkCompactYStart": node => node.y - node.height / 2,
- "compactLinkMidX": (node, state) => node.firstCompactNode.x + node.firstCompactNode.flexCompactDim[0] / 4 + state.compactMarginPair(node) / 4,
- "compactLinkMidY": node => node.firstCompactNode.y,
- "linkX": node => node.x,
- "linkY": node => node.y,
- "compactDimension": {
- sizeColumn: node => node.width,
- sizeRow: node => node.height,
- reverse: arr => arr,
- },
- "linkParentX": node => node.parent.x,
- "linkParentY": node => node.parent.y - node.parent.height,
- "buttonX": node => node.width / 2,
- "buttonY": node => 0,
- "centerTransform": ({ root, rootMargin, centerY, scale, centerX, chartHeight }) => `translate(${centerX},${chartHeight - rootMargin}) scale(${scale})`,
- "nodeFlexSize": ({ height, width, siblingsMargin, childrenMargin, state, node }) => {
- if (state.compact && node.flexCompactDim) {
- const result = [node.flexCompactDim[0], node.flexCompactDim[1]]
- return result;
- };
- return [width + siblingsMargin, height + childrenMargin]
- },
- "zoomTransform": ({ centerX, scale }) => `translate(${centerX},0}) scale(${scale})`,
- "diagonal": this.diagonal.bind(this),
- "swap": d => { d.y = -d.y; },
- "nodeUpdateTransform": ({ x, y, width, height }) => `translate(${x - width / 2},${y - height})`,
- },
- "right": {
- "nodeLeftX": node => -node.width,
- "nodeRightX": node => 0,
- "nodeTopY": node => - node.height / 2,
- "nodeBottomY": node => node.height / 2,
- "nodeJoinX": node => node.x - node.width - node.width,
- "nodeJoinY": node => node.y - node.height / 2,
- "linkJoinX": node => node.x - node.width,
- "linkJoinY": node => node.y,
- "linkX": node => node.x,
- "linkY": node => node.y,
- "linkParentX": node => node.parent.x - node.parent.width,
- "linkParentY": node => node.parent.y,
- "buttonX": node => 0,
- "buttonY": node => node.height / 2,
- "linkCompactXStart": node => node.x - node.width / 2,//node.x + (node.compactEven ? node.width / 2 : -node.width / 2),
- "linkCompactYStart": node => node.y + (node.compactEven ? node.height / 2 : -node.height / 2),
- "compactLinkMidX": (node, state) => node.firstCompactNode.x,// node.firstCompactNode.x + node.firstCompactNode.flexCompactDim[0] / 4 + state.compactMarginPair(node) / 4,
- "compactLinkMidY": (node, state) => node.firstCompactNode.y + node.firstCompactNode.flexCompactDim[0] / 4 + state.compactMarginPair(node) / 4,
- "centerTransform": ({ root, rootMargin, centerY, scale, centerX, chartWidth }) => `translate(${chartWidth - rootMargin},${centerY}) scale(${scale})`,
- "nodeFlexSize": ({ height, width, siblingsMargin, childrenMargin, state, node }) => {
- if (state.compact && node.flexCompactDim) {
- const result = [node.flexCompactDim[0], node.flexCompactDim[1]]
- return result;
- };
- return [height + siblingsMargin, width + childrenMargin]
- },
- "compactDimension": {
- sizeColumn: node => node.height,
- sizeRow: node => node.width,
- reverse: arr => arr.slice().reverse()
- },
- "zoomTransform": ({ centerY, scale }) => `translate(${0},${centerY}) scale(${scale})`,
- "diagonal": this.hdiagonal.bind(this),
- "swap": d => { const x = d.x; d.x = -d.y; d.y = x; },
- "nodeUpdateTransform": ({ x, y, width, height }) => `translate(${x - width},${y - height / 2})`,
- },
- }
- };
-
- this.getChartState = () => attrs;
-
- // Dynamically set getter and setter functions for Chart class
- Object.keys(attrs).forEach((key) => {
- //@ts-ignore
- this[key] = function (_) {
- if (!arguments.length) {
- return attrs[key];
- } else {
- attrs[key] = _;
- }
- return this;
- };
- });
-
- this.initializeEnterExitUpdatePattern();
- }
- initializeEnterExitUpdatePattern() {
- d3.selection.prototype.patternify = function (params) {
- var container = this;
- var selector = params.selector;
- var elementTag = params.tag;
- var data = params.data || [selector];
-
- // Pattern in action
- var selection = container.selectAll("." + selector).data(data, (d, i) => {
- if (typeof d === "object") {
- if (d.id) { return d.id; }
- }
- return i;
- });
- selection.exit().remove();
- selection = selection.enter().append(elementTag).merge(selection);
- selection.attr("class", selector);
- return selection;
+
- 
+ 
+ 
+