Graph Type
Radial Tidy Tree
Current Output
Initially, I receive a JSON response from the server and use recursion to flatten the JSON. I then utilize d3.tree to visualize the graph displayed below.
The Legislation node is designed so that upon double-clicking, it communicates with the backend to fetch a new JSON, triggering a re-render of the graph.
https://i.sstatic.net/HxWlF.png
After rerendering, the node transforms into Manufacturer/Legislation as illustrated here:
https://i.sstatic.net/8qLIY.png
In the illustration, I aim to distinguish the link by making it strokedashed, indicating that the particular node has been altered.
code
To keep this concise, I am excluding the code snippet:
ngAfterViewInit(): void {
const self = this;
const svg = d3.select('svg'),
width = +svg.attr('width'),
height = +svg.attr('height'),
g = svg.append('g').attr('transform', 'translate(' + (width / 3 + 240) + ',' + (height / 3 + 140) + ')');
const tree = d3.tree()
.size([2 * Math.PI, 375])
.separation(function(a, b) { return (a.parent === b.parent ? 1 : 2) / a.depth; });
const root = tree(d3.hierarchy(this.parse_node(this.config['viewStructure'])));
this.root = root; // store this is private variable
// Code for links and nodes...
}
Rerendering function
getProperties() {
// .... Some logic
const self = this;
function askExtension() {
// call the backend, get the json response
// rerender with some latency here..
setTimeout(() => {
d3.selectAll('svg > *').remove();
self.ngAfterViewInit();
console.log(nodeInfo.parent.data.name + '/' + nodeInfo.data.name); // `Manufacturer/Legislation`
// Logic for changing the link goes here
}, 1000);
}
}
I attempted using .forEach() on self.root.descendants() to locate Manufacturer/Legislation and modify the link using .links(), but it did not meet my requirements.
How can I dynamically alter a specific link to be dashed after rendering?