title: How to connect edges with nodes based on nodes id in d3.js graph library
body: <p>This code is working fine with the below given JSON data1 object but i want this code to work with this new_json Object. I want Links to be made on the nodes id.Any help ?</p>
  
  <pre><code> var new_json = {{"nodes": [{ "id": 124587, "name": "paper1", "citation": 5, "group": 1 },
  { "id": 178456, "name": "paper2", "citation": 8, "group": 2 }],
  "links": [{ "source": 124587, "target": 178456, "name": "A-B-1", "value": 8 }]};
  
  function load_graph(text) {
              var color = d3.scale.category20();           
              var data1 = {
                  "nodes": [
                      { "id": 0, "name": "paper1", "citation": 5, "group": 1 },
                      { "id": 1, "name": "paper2", "citation": 8, "group": 2 },
                      { "id": 2, "name": "paper3", "citation": 12, "group": 3 },
                      { "id": 3, "name": "paper4", "citation": 25, "group": 4 },
                      { "id": 4, "name": "paper5", "citation": 15, "group": 5 },
                      { "id": 5, "name": "paper6", "citation": 5, "group": 1 },
                      { "id": 6, "name": "paper7", "citation": 8, "group": 2 },
                      { "id": 7, "name": "paper8", "citation": 12, "group": 3 },
                      { "id": 8, "name": "paper9", "citation": 25, "group": 4 },
                      { "id": 9, "name": "paper10", "citation": 15, "group": 5 }
                  ],
                  "links": [
                      { "source": 0, "target": 1, "name": "A-B-1", "value": 8 },
                      { "source": 0, "target": 1, "name": "A-B-2", "value": 24 },
                      { "source": 0, "target": 2, "name": "A-C-1", "value": 12 },
                      { "source": 0, "target": 2, "name": "A-C-3", "value": 44 },
                      { "source": 2, "target": 3, "name": "A-D-1", "value": 11 },
                      { "source": 2, "target": 3, "name": "A-D-2", "value": 35 },
                      { "source": 2, "target": 4, "name": "A-E-1", "value": 16 },
                      { "source": 2, "target": 4, "name": "A-E-5", "value": 30 },
                      { "source": 4, "target": 5, "name": "A-B-1", "value": 8 },
                      { "source": 4, "target": 5, "name": "A-B-2", "value": 24 },
                      { "source": 5, "target": 6, "name": "A-C-1", "value": 12 },
                      { "source": 5, "target": 6, "name": "A-C-3", "value": 44 },
                      { "source": 5, "target": 7, "name": "A-D-1", "value": 11 },
                      { "source": 5, "target": 7, "name": "A-D-2", "value": 35 },
                      { "source": 7, "target": 8, "name": "A-E-1", "value": 16 },
                      { "source": 7, "target": 8, "name": "A-E-5", "value": 30 },
                      { "source": 8, "target": 3, "name": "A-C-1", "value": 12 },
                      { "source": 8, "target": 3, "name": "A-C-3", "value": 44 },
                      { "source": 8, "target": 9, "name": "A-D-1", "value": 11 },
                      { "source": 8, "target": 9, "name": "A-D-2", "value": 35 }
                  ]
              };
  
              // used to store the number of links between two nodes. 
              // mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex;
              var mLinkNum = {};
  
              // sort links first
              sortLinks();
  
              // set up linkIndex and linkNumer, because it may possible multiple links share the same source and target node
              setLinkIndexAndNum();
  
              var w = 960,
                  h = 500;
  
              var force = d3.layout.force()
                            .nodes(d3.values(data1.nodes))
                            .links(data1.links)
                            .size([w, h])
                            .linkDistance(200)
                            .charge(-300)
                            .on("tick", tick)
                            .start();
  
              var svg = d3.select(".graphContainer").append("svg:svg")
                          .attr("width", w)
                          .attr("height", h);
  
              var path = svg.append("svg:g")
                            .selectAll("line")
                            .data(force.links())
                            .enter().append("svg:path")
                            .attr("class", "link")
                            .style("stroke-width", function (d) { return Math.sqrt(d.value); });
  
  
              var circle = svg.append("svg:g")
                              .selectAll("circle")
                              .data(force.nodes())
                              .enter().append("svg:circle")
                              .attr("r", function (d) { return (d.citation); })
                              .style("fill", function (d) { return color(d.group); })
                              .call(force.drag);
  
              var text = svg.append("svg:g")
                            .selectAll("g")
                            .data(force.nodes())
                            .enter().append("svg:g");
  
              // A copy of the text with a thick white stroke for legibility.
              text.append("svg:text")
                  .attr("x", 8)
                  .attr("y", ".31em")
                  .attr("class", "shadow")
                  .text(function (d) { return d.name; });
  
              text.append("svg:text")
                  .attr("x", 8)
                  .attr("y", ".31em")
                  .text(function (d) { return d.name; });
  
              // Use elliptical arc path segments to doubly-encode directionality.
              function tick() {
                  path.attr("d", function (d) {
                      var dx = d.target.x - d.source.x,
                          dy = d.target.y - d.source.y,
                          dr = Math.sqrt(dx * dx + dy * dy);
                      // get the total link numbers between source and target node
                      var lTotalLinkNum = mLinkNum[d.source.id + "," + d.target.id] || mLinkNum[d.target.id + "," + d.source.id];
                      if (lTotalLinkNum &gt; 1) {
                          // if there are multiple links between these two nodes, we need generate different dr for each path
                          dr = dr / (1 + (1 / lTotalLinkNum) * (d.linkindex - 1));
                      }
                      // generate svg path
                      return "M" + d.source.x + "," + d.source.y +
                          "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y +
                          "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + d.source.y;
                  });
  
                  // Add tooltip to the connection path
                  path.append("svg:title")
                      .text(function (d, i) { return d.name; });
  
                  circle.attr("transform", function (d) {
                      return "translate(" + d.x + "," + d.y + ")";
                  });
  
                  text.attr("transform", function (d) {
                      return "translate(" + d.x + "," + d.y + ")";
                  });
              }
  
              // sort the links by source, then target
              function sortLinks() {
                  data.links.sort(function (a, b) {
                      if (a.source &gt; b.source) {
                          return 1;
                      }
                      else if (a.source &lt; b.source) {
                          return -1;
                      }
                      else {
                          if (a.target &gt; b.target) {
                              return 1;
                          }
                          if (a.target &lt; b.target) {
                              return -1;
                          }
                          else {
                              return 0;
                          }
                      }
                  });
              }
  
              //any links with duplicate source and target get an incremented 'linknum'
              function setLinkIndexAndNum() {
                  for (var i = 0; i &lt; data.links.length; i++) {
                      if (i != 0 &amp;&amp;
                          data.links[i].source == data.links[i - 1].source &amp;&amp;
                          data.links[i].target == data.links[i - 1].target) {
                          data.links[i].linkindex = data.links[i - 1].linkindex + 1;
                      }
                      else {
                          data.links[i].linkindex = 1;
                      }
                      // save the total number of links between two nodes
                      if (mLinkNum[data.links[i].target + "," + data.links[i].source] !== undefined) {
                          mLinkNum[data.links[i].target + "," + data.links[i].source] = data.links[i].linkindex;
                      }
                      else {
                          mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex;
                      }
                  }
              }
          }
  
  &lt;/script&gt;
  </code></pre>