Пытается несколько подходов, чтобы сделать размер узла направленного графика силы пропорциональным его степени

Question

У меня есть диаграмма направленности усилия, которая отлично работает. В качестве следующего шага я пытаюсь сделать размер узла пропорциональным его степени.

Я пробовал несколько оценок, но безрезультатно.

Первый подход:

Мои данные сохраняется в переменной с именем, как d3GraphData. Я пытаюсь использовать функцию foreach() над узлами, а затем ссылки. Для каждого узла я ввожу новые атрибуты inDegree и outDegree. После этого я повторяю каждую ссылку; и для каждого d.source, я увеличиваем полустепени и для каждого d.target я увеличиваю полустепени захода

   var nodes = []; 
    var links = []; 

    d3GraphData.nodes = nodes; 
    d3GraphData.links = links; 


nodes.forEach(function(d) { 
    d.inDegree = 0; 
    d.outDegree = 0; 
}); 
links.forEach(function(d) { 
    nodes[d.source].outDegree += 1; 
    nodes[d.target].inDegree += 1; 
}); 

Это не похожа на работу и не полустепени захода и полустепени рассчитать. Когда я пытаюсь использовать их в г атрибуте

 node.attr("r",function(d) {return (d.inDegree+d.outDegree) * 2;}); 

Я получаю ожидаемую ошибку:

Error: <circle> attribute r: Expected length, "NaN". 

Второй подход:

я прочитал в какой-то документации, D3 автоматически вычисляет степень и сохраняет его в атрибуте .weight. Итак, я нашел способ использовать его.

 node.attr("r", function(d) {return 
d3.sum(d3GraphData.links.filter(function(p) {return p.source == d || p.target 
== d}), function(p) {return p.weight})}) 

Это, кажется, не генерирует никакого NaN ошибки, но узлы, кажется, не появляются так же, как первый подход, и я вижу только ссылку.

Может быть, у меня что-то не хватает, но я бы очень признателен за любые советы или материалы.

Ниже fiddle

Answer 1

я мог бы найти ошибку в коде, используемом в первом подходе. Вы должны были использовать переменную node (выбор узлов d3) вместо использования переменной nodes (массив данных) для установки значений inDegree и outDegree.

node.each(function(d) { 
    d.inDegree = 0; 
    d.outDegree = 0; 
    }); 

    lines.each(function(d) { 
    d.source.outDegree += 1; 
    d.target.inDegree += 1; 
    }); 

    node.attr("r", function(d) { 
    var weight = d.inDegree ? d.inDegree : 0 + d.outDegree ? d.outDegree : 0; 
    weight = weight > 25 ? 25 : (weight < 5 ? 5 : weight); 
    return weight; 
    }); 

Вот обновленная скрипка link