Maison > interface Web > js tutoriel > Comment implémenter la focalisation graphique dirigée par la force D3

Comment implémenter la focalisation graphique dirigée par la force D3

一个新手
Libérer: 2017-10-19 09:36:59
original
3014 Les gens l'ont consulté

Description de l'effet

Double-cliquez sur le nœud, le nœud et les nœuds une fois associés au nœud restent en surbrillance, les nœuds restants deviennent gris, le rayon devient plus petit, le texte disparaît et se rétrécit vers l'intérieur.

Affichage de l'effet

État normal

Effet de mise au point

Code clé

Modifications de nœuds

Les nœuds activés conservent le style en surbrillance, et les nœuds restants appliquent le style noActive et le rayon devient plus petit.


&#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
Copier après la connexion

Le plus important est qu'après avoir double-cliqué sur le nœud, les paramètres du modèle de guidage de force changeront également en conséquence en fonction du rayon du nœud. La force de charge du nœud à l'état inactif est modifiée à 50. Si le nœud situé à une extrémité d'une ligne est inactif, définissez sa distance la plus courte, distance, sur 50. Cela obtiendra un effet de rétrécissement.


this.simulation
.alpha(0.3)
.force(&#39;charge&#39;, d3.forceManyBody().strength((data) => {if (data.nodeStatus === -2) {return -50;
}return -200;
}))
.force(&#39;link&#39;, 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();
Copier après la connexion

Veuillez vérifier le code source pour une mise en œuvre détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal