D3 сила-ориентированный граф узлы не имеют атрибута «веса»

Question

Я использую отлажен код из http://hughsk.github.io/colony/ но я получаю ошибку:

Uncaught TypeError: Cannot read property 'weight' of undefined

Это проистекает из force.nodes (узлы) функция, для которой в документе указано, что вес не должен устанавливаться, поскольку значения по умолчанию будут инициализированы макетом при создании start().

Может ли кто-нибудь увидеть, что я делаю неправильно, что не позволяет инициализировать значения веса?

Вот мой код:

var colony = { 
    "nodes":[ 
    { 
     "pages":123, 
     "name":"Test", 
     "id":2 
    }, 
    { 
     "pages":456, 
     "name":"Test2", 
     "id":3 
    } 
    ], 
    "links":[ 
    { 
     "source":123, 
     "target":456, 
     "weight":100 
    } 
    ] 
} 

var nodes = colony.nodes 
    , links = colony.links 
    , scale = 1 
    , focus 

var width = 960 
    , height = 960 
    , link 
    , node 
    , text 
    , textTarget = false 

var colors = { 
     links: 'FAFAFA' 
    , text: { 
     subtitle: 'FAFAFA' 
    } 
    , nodes: { 
     method: function(d) { 
      return groups[d.group].color 
     } 
     , hover: 'FAFAFA' 
     , dep: '252929' 
    } 
} 

links.forEach(function(link) { 
    var source = function(nodes,link){ 
     for (var i = 0; i < nodes.length; i++){ 
      if (nodes[i].id == link.source){ 
       return nodes[i]; 
      } 
     } 
    } 
     , target = function(nodes,link){ 
     for (var i = 0; i < nodes.length; i++){ 
      if (nodes[i].id == link.target){ 
       return nodes[i]; 
      } 
     } 
    } 

    source.children = source.children || [] 
    source.children.push(link.target) 

    target.parents = target.parents || [] 
    target.parents.push(link.source) 
}) 

var groups = nodes.reduce(function(groups, file) { 
    var group = file.mgroup || 'none' 
     , index = groups.indexOf(group) 

    if (index === -1) { 
     index = groups.length 
     groups.push(group) 
    } 

    file.group = index 

    return groups 
}, []) 

groups = groups.map(function(name, n) { 
    var color = d3.hsl(n/groups.length * 300, 0.7, 0.725) 

    return { 
      name: name 
     , color: color.toString() 
    }; 
}) 

var force = d3.layout.force() 
    .size([width, height]) 
    .charge(-50 * scale) 
    .linkDistance(20 * scale) 
    .on('tick', function() { 
     link.attr('x1', function(d) { return d.source.x; }) 
      .attr('y1', function(d) { return d.source.y; }) 
      .attr('x2', function(d) { return d.target.x; }) 
      .attr('y2', function(d) { return d.target.y; }) 

     node.attr('cx', function(d) { return d.x; }) 
      .attr('cy', function(d) { return d.y; }) 

     if (textTarget) { 
      text.attr('transform' 
        , 'translate(' + textTarget.x + ',' + textTarget.y + ')') 
     } 
    }) 

var vis = d3.select('body') 
    .append('svg') 
    .attr('width', width) 
    .attr('height', height) 

force.nodes(nodes) 
    .links(links) 
    .start() 

Answer 1

Ваша главная проблема заключается в том, что вы должны изменить ссылки в forEach цикле, что дает вам что-то вроде:

links.forEach(function (link) { 
    //var source, target; 
    for (var i = 0; i < nodes.length; i++) { 
     if (nodes[i].pages == link.source) { 
      link.source = nodes[i]; 
     } 
    } 


    for (var i = 0; i < nodes.length; i++) { 
     if (nodes[i].pages == link.target) { 
      link.target = nodes[i]; 
     } 
    } 

    link.source.children = link.source.children || [] 
    link.source.children.push(link.target) 

    link.target.parents = link.target.parents || [] 
    link.target.parents.push(link.source) 
    return link; 
}) 

Тогда, в tick функции, вам также придется перебирать все links и nodes. Вы можете найти хороший пример в documentation