d3.js强制有向图：如何使节点大小取决于链接的值？

Question

I have this kind of data:

var nodes = [
{
    "id": "A",
    "label": "Data A",
    "group": "0",
    "level": "0"
}, {
    "id": "B",
    "label": "Data B",
    "group": "1",
    "level": "1"
},
// etc //
]

var links = [
{
    "source": "A",
    "target": "B",
"strength": "0.5",
    "value": "276"
}, {
    "source": "A",
    "target": "C",
"strength": "0.5",
"value": "866"
},
// etc //
]

I've been trying to set the nodes radius size according to the value from the links that have said node as its target .

So for example, node B should have its size according to the value of 276 (the link that have node B as its target).

This what I use:

var nodeElements = g.append("g") 
    .attr("class", "nodes")
    .selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("r", function(node,link){
          var radius = 12;
          if (node.level == 0) radius = radius * 2; // Setting up the main node as bigger than others

          node.weight = link.filter(function(link) {
             if (link.target.index == node.index){
               var linkValue = link.value;
               if (linkValue > 500) ? (radius = 12) : (radius = 6);
             }
          });

          return radius;
      })
    .attr("fill", getNodeColor)
    .attr("stroke", "#fff")
    .attr('stroke-width', 2)
    .on('mouseover', selectNode)

That doesn't seem to work though. Says it doesn't recognize the link.filter , something I've taken from here . I'm using d3.js v4.

Tried looking up for clues but still got no hints. Any ideas?

Answer 1

There are several things that need to change, but first you should understand that you are not automatically adding links to the node's data.

So the purpose of the filter statement seems to be to find the corresponding link in that array, based on index. There is no link variable passed into the outer function, but instead you should be searching through the links array defined above for one link that has target with the node's id.

If you only need one link, and not all of them, use Array.prototype.find . But filter and find work the same way - the anonymous function defined is called on each item in the array. find stops at the first found object, while filter returns all matches.

.attr("r", function(dat, index, n) {
    var linkItem = links.find(function(link) {
        return link.target == dat.id;
    });
    var radius = 12;
    // linkItem would be undefined if the item was not found in the links
    if (linkItem && linkItem.value > 500) {
        radius = 12;
    } else {
        radius = 6;
    }

    // you should double the radius towards the end,
    // so that radius doesn't get overwritten
    if (dat.level === 0) {
        radius = 2 * radius;
    }

    return radius;
})