title: D3 Node radius depends on number of links : weight property
body: <p>I am trying to create a force directed graph with D3.
  As for now, the radius of the node depends on a <strong>key-value</strong> pair in JSON <strong>( d.size )</strong></p>
  
  <p>I'm aware of the <strong>d3.weight</strong> property which can be used to count the number of links and associate with <strong>radius attribute of the circle</strong>, but I somehow could not get it to work.</p>
  
  <p>Please help me with this.</p>
  
  <p>Find the code below:</p>
  
  <pre><code>d3.json('graph.json', (error, graph) =&gt; {
    const width = 1200;
    const height = 900;
  
    const simulation = d3.forceSimulation()
      .nodes(graph.nodes)
      .force('link', d3.forceLink().id(d =&gt; d.id))
      .force('charge', d3.forceManyBody().strength([-605]))
      .force('center', d3.forceCenter(width / 2, height / 2))
      .on('tick', ticked);
  
    simulation.force('link')
      .links(graph.links)
      .distance([140]);
  
    const R = 30;
  
    const svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);
  
    // add defs-marker
    // add defs-markers
    svg.append('svg:defs').selectAll('marker')
      .data([{ id: 'end-arrow', opacity: 1 }, { id: 'end-arrow-fade', opacity: 0.1 }])
      .enter().append('marker')
        .attr('id', d =&gt; d.id)
        .attr('viewBox', '0 0 10 10')
        .attr('refX', 2 * R)
        .attr('refY', 5)
        .attr('markerWidth', 4)
        .attr('markerHeight', 4)
        .attr('orient', 'auto')
        .append('svg:path')
          .attr('d', 'M0,0 L0,10 L10,5 z')
          .style('opacity', d =&gt; d.opacity);
  
    let link = svg.selectAll('line')
      .data(graph.links)
      .enter().append('line');
  
    link  
      .attr('class', 'link')
      .attr('marker-end', 'url(#end-arrow)')
      .on('mouseout', fade(1));
  
    let node = svg.selectAll('.node')
      .data(graph.nodes)
      .enter().append('g')
      .attr('class', 'node');
  
    node.append('circle')
      .attr('r', function (d) {
                  return (d.size * 12);
              })
      .on('mouseover', fade(0.1))
      .on('mouseout', fade(1))
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
  
    node.append('text')
      .attr('x', 0)
      .attr('dy', '.35em')
      .text(d =&gt; d.name);
  
    function ticked() {
      link
        .attr('x1', d =&gt; d.source.x)
        .attr('y1', d =&gt; d.source.y)
        .attr('x2', d =&gt; d.target.x)
        .attr('y2', d =&gt; d.target.y);
  
      node
        .attr('transform', d =&gt; `translate(${d.x},${d.y})`);
    }
  
  
    function dragstarted(d) {
      if (!d3.event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
    }
  
    function dragged(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
    }
  
    function dragended(d) {
      if (!d3.event.active) simulation.alphaTarget(0);
      d.fx = null;
      d.fy = null;
    }
  
    const linkedByIndex = {};
    graph.links.forEach(d =&gt; {
      linkedByIndex[`${d.source.index},${d.target.index}`] = 1;
    });
  
    function isConnected(a, b) {
      return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`] || a.index === b.index;
    }
  
    function fade(opacity) {
      return d =&gt; {
        node.style('stroke-opacity', function (o) {
          const thisOpacity = isConnected(d, o) ? 1 : opacity;
          this.setAttribute('fill-opacity', thisOpacity);
          return thisOpacity;
        });
  
        link.style('stroke-opacity', o =&gt; (o.source === d || o.target === d ? 1 : opacity));
        link.attr('marker-end', o =&gt; (opacity === 1 || o.source === d || o.target === d ? 'url(#end-arrow)' : 'url(#end-arrow-fade)'));
      };
    }
  })
  </code></pre>
  
  <p>The JSON structure is as below:</p>
  
  <pre><code>{
      "nodes": [
          {
              "name": "A",
              "id": 0,
              "size": 1
          },
          {
              "name": "D",
              "id": 1,
              "size": 2
          },
          {
              "name": "K",
              "id": 2,
              "size": 3
          }
      ],
      "links": [
          {
              "source": 0,     //id of the soure application
              "target": 1      //id of the destination application
          },
          {
              "source": 0,
              "target": 2
          },
          {
              "source": 3,
              "target": 4
          }
      ]
  }
  </code></pre>