how can we reduce the distance between two edges?

Question

actually my d3js graph layout gets weird when there's too much data load from database.

so i want to reduce the distance between two edges. here is the code...

<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;

                    };
                };

            }



        }

i really got stuck in this issue. please can anybody help me out.

Answer 1

In D3 v3.x v2.x (the version you're using) the distance between the links can be set by linkDistance:

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

According to the docs:

If distance is specified, sets the target distance between linked nodes to the specified value. If distance is not specified, returns the layout's current link distance, which defaults to 20. If distance is a constant, then all links are the same distance.

Here is your updated fiddle: https://jsfiddle.net/v145zweL/