2016-06-03 6 views
2

Link to my code (Plunker)по радиусу узла увеличения парения

Я разрабатывает схему сети в D3.js компоновки силы я застрял с помощью мыши над функциональностью. Когда я нахожу узел, я хочу, чтобы ссылки и дети (один прыжок), связанные с ним, расширялись по размеру. Прямо сейчас мой код увеличивает размер зависающего узла и связанных с ним ссылок, но не связанных с ним узлов.

Это то, что я пытался до сих пор,

На мыши над наведен узел будет расширяться -

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); 
} 

курсора мыши на наведен узел вернется в тот же размер, как это было раньше -

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; }); 
} 

Заранее спасибо.

ответ

2

Вам нужно несколько для петель, чтобы получить это через:

Внутри функции наведения мыши сделать это:

//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); 

рабочий пример here

+0

Именно то, что я ищу! Я могу узнать, что вы подразумеваете под этой строкой: 'd3.selectAll (" circle ") [0] .forEach (function (circle) {})' и почему бы не 'd3.selectAll (" circle "). ForEach (function (круг) {}) '? –

+1

'd3.selectAll (" circle ") [0]' // Это даст вам элементы DOM, т. Е. все круглые DOM в SVG. позже в цикле foreach я делаю 'd3.select (circle) .data() [0]', это приведет к привязке данных к этому кругу. – Cyril

+0

Спасибо @Cyril. Следующий вопрос http://stackoverflow.com/questions/37649329/filter-nodes-and-edges-according-to-user-preference –

Смежные вопросы