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.
Normal state
Focus effect
##Key codeNode changesActivated nodes maintain the highlighted style, and other nodes apply the noActive style, and the radius becomes smaller.'class', (data) => (data.hide && 'hide') || (data.nodeStatus < 0 && 'noActive') || (data.cateType === 0 && 'mainCompany') || (data.cateType === 1 && 'relativeCompany') || (data.cateType === 2 && 'relativePerson''r', (data) => (data.nodeStatus === -2 5 data.cateType < 2 ? 20 : 10
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();
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!