title: How to connect from the edge of a circle instead of the center
body: <p><a href="https://i.stack.imgur.com/jN8Vg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jN8Vg.png" alt="here im added the link  from  circle center to circle center but i want to connect from circle edge to edge " /></a></p>
  <p><strong>Here im added the link  from  circle center to circle center but i want to connect from circle edge to edge</strong></p>
  <p><em>I want to connect the links from node edge to edge but im getting node center to center
  is i did mistake in my code please help me out if any one know answer for this problem</em></p>
  <blockquote>
  <p>here is my full working code</p>
  </blockquote>
  <pre><code>const VocabularyGraphh = () =&gt; {
    const svgRef = useRef(null);
    React.useEffect(() =&gt; {
      const svg = d3.select(svgRef.current),
        diameter = +svg.attr(&quot;width&quot;),
        g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(2,2)&quot;),
        format = d3.format(&quot;,d&quot;);
  
      const links = [
        { source: &quot;animate1&quot;, target: &quot;animate4&quot; },
        { source: &quot;animate6&quot;, target: &quot;animate9&quot; },
        //   { source: &quot;animate9&quot;, target: &quot;animate6&quot; },
        { source: &quot;animate3&quot;, target: &quot;animate2&quot; },
        { source: &quot;animate1&quot;, target: &quot;animate8&quot; },
        { source: &quot;animate3&quot;, target: &quot;animate5&quot; },
        //   { source: &quot;analytics1&quot;, target: &quot;analytics2&quot; },
      ];
  
      let root = {
        children: [
          {
            name: &quot;analytics1&quot;,
            children: [
              {
                name: &quot;animate1&quot;,
                size: 1500,
              },
              {
                name: &quot;animate2&quot;,
                size: 1500,
              },
              {
                name: &quot;animate3&quot;,
                size: 1500,
              },
              {
                name: &quot;animate33&quot;,
                size: 1500,
              },
              {
                name: &quot;animate23&quot;,
                size: 1500,
              },
              {
                name: &quot;animate32&quot;,
                size: 1500,
              },
              {
                name: &quot;animate11&quot;,
                size: 1500,
              },
              {
                name: &quot;animate22&quot;,
                size: 1500,
              },
              {
                name: &quot;animate34&quot;,
                size: 1500,
              },
              {
                name: &quot;animate16&quot;,
                size: 1500,
              },
              {
                name: &quot;animate20&quot;,
                size: 1500,
              },
              {
                name: &quot;animate3&quot;,
                size: 1500,
              },
            ],
          },
          {
            name: &quot;analytics2&quot;,
            children: [
              {
                name: &quot;animate4&quot;,
                size: 1500,
              },
              {
                name: &quot;animate5&quot;,
                size: 1500,
              },
              {
                name: &quot;animate6&quot;,
                size: 1500,
              },
            ],
          },
          {
            name: &quot;analytics3&quot;,
            children: [
              {
                name: &quot;animate7&quot;,
                size: 1500,
              },
              {
                name: &quot;animate8&quot;,
                size: 1500,
              },
              {
                name: &quot;animate9&quot;,
                size: 1500,
              },
            ],
          },
        ],
      };
  
      // svg
      //   .append(&quot;svg:defs&quot;)
      //   .append(&quot;svg:marker&quot;)
      //   .attr(&quot;id&quot;, &quot;arrow&quot;)
      //   .attr(&quot;viewBox&quot;, &quot;0 0 10 10&quot;)
      //   .attr(&quot;refX&quot;, 10)
      //   .attr(&quot;refY&quot;, 5)
      //   .attr(&quot;markerUnits&quot;, &quot;strokeWidth&quot;)
      //   .attr(&quot;markerWidth&quot;, 6)
      //   .attr(&quot;markerHeight&quot;, 3)
      //   .attr(&quot;orient&quot;, &quot;auto&quot;)
      //   .append(&quot;svg:path&quot;)
      //   .style(&quot;stroke&quot;, &quot;none&quot;)
      //   .attr(&quot;d&quot;, &quot;M 0 0 L 10 5 L 0 10 z&quot;);
  
      const pack = d3
        .pack()
        .size([diameter / 2, diameter / 2])
        .padding(100);
  
      root = d3
        .hierarchy(root)
        .sum(function (d) {
          return d.size;
        })
        .sort(function (a, b) {
          return b.value - a.value;
        });
  
      const node = g
        .selectAll(&quot;.node&quot;)
        .data(pack(root).descendants())
        .enter()
        .filter(function (d) {
          return !!d.data.name;
        })
        .append(&quot;g&quot;)
        .attr(&quot;id&quot;, function (d) {
          return d.data.name;
        })
        .attr(&quot;class&quot;, function (d) {
          return d.children ? &quot;node&quot; : &quot;leaf node&quot;;
        })
        .attr(&quot;transform&quot;, function (d) {
          return &quot;translate(&quot; + d.x + &quot;,&quot; + d.y + &quot;)&quot;;
        });
  
      node.append(&quot;title&quot;).text(function (d) {
        return d.data.name + &quot;\n&quot; + format(d.value);
      });
  
      const arrow = svg.selectAll(&quot;path.arrow&quot;).data(links, JSON.stringify);
      arrow
        .enter()
        .append(&quot;path&quot;)
        .attr(&quot;class&quot;, &quot;arrow&quot;)
        .attr(&quot;x1&quot;, function (d) {
          console.log(d);
          let translate = getTranslate(d.source);
          console.log(translate);
          return translate[0];
        })
        .attr(&quot;x2&quot;, function (d) {
          let translate = getTranslate(d.target);
          return translate[0];
        })
        .attr(&quot;y1&quot;, function (d) {
          let translate = getTranslate(d.source);
          return translate[1];
        })
        .attr(&quot;y2&quot;, function (d) {
          let translate = getTranslate(d.target);
          return translate[1];
        })
        .attr(&quot;d&quot;, function (d) {
          // console.log(d);
          let source = getTranslate(d.source),
            target = getTranslate(d.target),
            x1 = source[0],
            x2 = target[0],
            y1 = source[1],
            y2 = target[1];
          console.log(source);
          console.log(target);
          // let dx = x1 - x2,
          //   dy = y1 - y2,
          //   dr = Math.sqrt(dx * dx + dy * dy);
  
          return (
            &quot;M&quot; + x1 + &quot;,&quot; + y1 + &quot;A&quot; + 0 + &quot;,&quot; + 0 + &quot; 0 0,1 &quot; + x2 + &quot;,&quot; + y2
          );
        })
        .style(&quot;stroke&quot;, &quot;black&quot;)
        .style(&quot;fill&quot;, &quot;none&quot;)
        .style(&quot;stroke-width&quot;, 1)
        .attr(&quot;marker-end&quot;, &quot;url(#arrow)&quot;)
        .attr(&quot;class&quot;, &quot;hidden-arrow &quot;);
      //   .attr(&quot;stroke-width&quot;, 1);
  
      node
        .append(&quot;circle&quot;)
        .attr(&quot;r&quot;, function (d) {
          console.log(d);
          return d.r;
        })
        .attr(&quot;class&quot;, &quot;pink&quot;);
  
      node.filter(function (d) {
        return !d.children;
      });
      //   .append(&quot;text&quot;)
      //   .attr(&quot;dy&quot;, &quot;0.3em&quot;)
      //   .text(function (d) {
      //     return d.data.name.substring(0, d.r / 3);
      //   });
  
      function getTranslate(datum) {
        const circle = d3.select(&quot;#&quot; + datum);
        const string = circle.attr(&quot;transform&quot;);
        const translate = string
          .substring(string.indexOf(&quot;(&quot;) + 1, string.indexOf(&quot;)&quot;))
          .split(&quot;,&quot;);
        return translate;
      }
    }, []);
    return (
      &lt;div&gt;
        &lt;svg ref={svgRef} width=&quot;960&quot; height=&quot;960&quot;&gt;&lt;/svg&gt;
      &lt;/div&gt;
    );
  };
  
  export default VocabularyGraphh;
  </code></pre>
  <p><strong>if anyone give this solution thats so appreciatable</strong></p>