どのようにして2つのエッジ間の距離を減らすことができますか？

Question

実際に私のd3jsグラフのレイアウトは、データベースからのデータ読み込みが多すぎると奇妙になります。

私は2つのエッジ間の距離を減らしたいと思います。ここにコードは...

<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
    <title>Weighted Citation Graph</title> 
    <style> 
     path.link { 
      fill: none; 
      stroke: #666; 
      stroke-width: 1.5px; 
     } 

     circle { 
      fill: #ccc; 
      stroke: #333; 
      stroke-width: 1.5px; 
     } 

     text { 
      font: 10px sans-serif; 
      pointer-events: none; 
     } 

      text.shadow { 
       stroke: #fff; 
       stroke-width: 3px; 
       stroke-opacity: .8; 
      } 

     body { 
      background-color: white; 
      margin: 0px; 
     } 

     .graphContainer { 
      text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; 
     } 
    </style> 
    <script> 
     function load_graph(text) { 

      var color = d3.scale.category20(); 
      try{ 
       var data = JSON.parse(text); 
      } catch (e) { 
       window.alert("sometext: "+e); 
      } 

      var mLinkNum = {}; 

      // sort links first 
      // sortLinks(); 

      data.links.sort(function (a, b) { 
       if (a.source > b.source) { return 1; } 
       else if (a.source < b.source) { return -1; } 
       else { 
        if (a.target > b.target) { return 1; } 
        if (a.target < b.target) { return -1; } 
        else { return 0; } 
       } 
      }) 

      // set up linkIndex and linkNumer, because it may possible multiple links share the same source and target node 
      setLinkIndexAndNum(); 


      var w = 2000, 
       h = 2000; 

      var force = d3.layout.force() 
      .size([w, h]) 
      .linkDistance(200) 
      .charge(-600) 
      .on("tick", tick); 

      var svg = d3.select(".graphContainer").append("svg:svg") 
      .attr("width", w) 
      .attr("height", h); 

      var color = d3.scale.category10() 
      var edges = []; 
      data.links.forEach(function (e) { 
       var sourceNode = data.nodes.filter(function (n) { 
        return n.id === e.source; 
       })[0], 
        targetNode = data.nodes.filter(function (n) { 
         return n.id === e.target; 
        })[0]; 

       edges.push({ 
        source: sourceNode, 
        target: targetNode, 
        name: e.name, 
        value: e.value, 
        linkindex: e.linkindex, 
        grouo: e.grouo 
       }); 
      }); 

      console.log(edges) 
      force 
       .nodes(data.nodes) 
       .links(edges) 
       .start(); 

      var path = svg.append("svg:g") 
      .selectAll("line") 
      .data(edges) 
      .enter().append("svg:path") 
      .attr("class", "link") 
      .style("stroke-width", function (d, i) { 
       console.log(d.value) 
       return Math.sqrt(d.value); 
      }).style('stroke', function (d) { 
       return color(d.grouo); 
      }); 


      var circle = svg.append("svg:g") 
      .selectAll("circle") 
      .data(force.nodes()) 
      .enter().append("svg:circle") 
      .attr("r", function (d) { 
       return (Math.sqrt(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"); 
      console.log('test') 
      // 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, i) { 
        var dx = d.target.x - d.source.x, 
         dy = d.target.y - d.source.y, 
         dr = 75 * d.linkindex; //linknum is defined above 
        var output = "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
        //console.log(d) 
        return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.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 sortLinks1() { 
       data.links.sort(function (a, b) { 
        if (a.source > b.source) { 
         return 1; 
        } else if (a.source < b.source) { 
         return -1; 
        } else { 
         if (a.target > b.target) { 
          return 1; 
         } 
         if (a.target < b.target) { 
          return -1; 
         } else { 
          return 0; 
         } 
        } 
       }); 
      } 



      //any links with duplicate source and target get an incremented 'linknum' 
      function setLinkIndexAndNum1() { 
       for (var i = 0; i < data.links.length; i++) { 
        if (i != 0 && 
         data.links[i].source == data.links[i - 1].source && 
         data.links[i].target == data.links[i - 1].target) { 
         data.links[i].linkindex = data.links[i - 1].linkindex + 1; 
         console.log(data.links[i].linkindex) 
        } else { 
         data.links[i].linkindex = 1; 
         console.log(data.links[i].linkindex) 
        } 
        // 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; 
        } 
       } 
      } 

      function setLinkIndexAndNum() { 

       for (var i = 0; i < data.links.length; i++) { 
        if (i != 0 && 
         data.links[i].source == data.links[i - 1].source && 
         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; 

        }; 
       }; 

      } 



     } 

私は本当にこの問題に悩まされています。誰でも助けてください。

Answer 1

D3 v3.xのバージョン2.x（あなたが使用しているバージョン）では、リンク間の距離がlinkDistanceによって設定することができます。

var force = d3.layout.force() 
    .linkDistance(someValue) 

ドキュメントによると：

distanceが指定されている場合、リンクされたノード間のターゲット距離を指定された値に設定します。 distanceが指定されていない場合は、レイアウトの現在のリンク距離を返します。デフォルトは20です。distanceが定数の場合、すべてのリンクは同じ距離になります。ここで

あなたの更新フィドルです：https://jsfiddle.net/v145zweL/