How to achieve d3 force-directed graph focusing

Effect Description

Double-click the node, the node and the nodes once associated with the node remain highlighted, the remaining nodes become gray, the radius becomes smaller, the text disappears, and shrinks inward.

Effect display

Normal state

Focus effect

##Key code

Node changes

Activated nodes maintain the highlighted style, and other nodes apply the noActive style, and the radius becomes smaller.

&#39;class&#39;, (data) => (data.hide && &#39;hide&#39;) || (data.nodeStatus < 0 && &#39;noActive&#39;) || (data.cateType === 0 && &#39;mainCompany&#39;) || (data.cateType === 1 && &#39;relativeCompany&#39;) || (data.cateType === 2 && &#39;relativePerson&#39;&#39;r&#39;, (data) => (data.nodeStatus === -2 5 data.cateType < 2 ? 20 : 10

The most important thing is that after double-clicking the node, the parameters of the force guidance model will also change accordingly according to the node radius. The node charge force in the inactive state is changed to 50. If the node at one end of a line is inactive, set its shortest distance, distance, to 50. This will achieve a shrinking effect.

this.simulation
.alpha(0.3)
.force('charge', d3.forceManyBody().strength((data) => {if (data.nodeStatus === -2) {return -50;
}return -200;
}))
.force('link', d3.forceLink(this.edgesData).id((data) => { return data.name; }).distance((data) => {if (data.target.nodeStatus === -2 || data.source.nodeStatus === -2) {return 50;
}return 150;
}))
.restart();

Please check the source code for detailed implementation

The above is the detailed content of How to achieve d3 force-directed graph focusing. For more information, please follow other related articles on the PHP Chinese website!