sur le rayon de noeud d'augmentation de vol stationnaire

Question

Link to my code (Plunker)

Je développe un schéma de réseau dans la mise en vigueur d3.js je suis coincé avec une souris sur la fonctionnalité. Lorsque je planerai un nœud, je veux que les liens et les enfants (un saut) qui lui sont associés augmentent en taille. À l'heure actuelle, mon code augmente la taille du nœud planant et des liens qui lui sont associés, mais pas les nœuds qui lui sont associés.

C'est ce que je l'ai essayé jusqu'à présent,

Sur la souris sur le nœud survolée développer -

function mouseover(d) { 
    link.style('stroke-width', function(l) { 
    if (d === l.source || d === l.target) 
     return 4; 
    }); 

    d3.select(this).select("circle").transition() 
    .duration(300) 
    .attr("r", 12); 
} 

Sur la souris sur le nœud survolée Retournons même taille comme avant -

function mouseout() { 
    link.style('stroke-width', 1.5); 
    d3.select(this).select("circle") 
    .transition() 
    .duration(750) 
    .attr("r", function(d) { return Math.sqrt(d.size)/10 || 4.5; }); 
} 

Merci d'avance.

Answer 1

Vous avez besoin de quelques boucles pour obtenir ce à travers:

Dans la fonction mouseover faire ceci:

//links for which source or traget is hovered  
var filtered = link.filter(function(l){ 
    return (d === l.source || d === l.target); 
}) 
filtered.style("stroke-width", 4); 
//select all the data associated with the link i.e. source and target data 
var selectedData = []; 
filtered.each(function(f){ 
    selectedData.push(f.source); 
    selectedData.push(f.target); 
}); 
//select all the circles for which we have collected the data above. 
var circleDOM = []; 
selectedData.forEach(function(sd){ 
    d3.selectAll("circle")[0].forEach(function(circle){ 
    console.log(d3.select(circle).data()[0].name, sd.name) 
    if (d3.select(circle).data()[0].name == sd.name){ 
     circleDOM.push(circle);//collect all the DOM Elements for which the data matches. 
    } 
    }); 
}); 
//do transition with all selected DOMs 
d3.selectAll(circleDOM).transition() 
    .duration(300) 
    .attr("r", 12); 

exemple de travail here