D3力導向圖節點沒有屬性“權重”

Question

我正在使用來自http://hughsk.github.io/colony/的經過調整的代碼，但我不斷收到錯誤消息：

Uncaught TypeError：無法讀取未定義的屬性“ weight”

這源於force.nodes（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 。 您可以在文檔中找到一個很好的例子