erica_force_distance

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
        fill: #ccc;
        stroke: #fff;
        stroke-width: 2px;
    }
    /*add css for links*/
    
    .link {
        stroke: #777;
        stroke-width: 2px;
    }

</style>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script>

// set a width and height for our SVG
var width = 700,
    height = 700;

var links = [
    { source: 'PortalX', target:'PaymentGateway', distance:105 },
    { source: 'PortalX', target:'StarRezWeb',distance:400 },
    { source: 'PaymentGateway', target:'StarRezWeb', distance:330 },
    { source: 'StarRezWeb', target:'Conference',distance:501 },
];

// create empty nodes array
    var nodes = {};
    
    // compute nodes from links data
    links.forEach(function(link) {
        link.source = nodes[link.source] ||
            (nodes[link.source] = {name: link.source});
        link.target = nodes[link.target] ||
            (nodes[link.target] = {name: link.target});        
    });

// add a SVG to the body for our viz
    var svg=d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);

// use the force
    var force = d3.layout.force()
        .size([width, height])
        .nodes(d3.values(nodes))
        .links(links)
        .on("tick", tick) 
        .linkDistance(function(d){
          
          // ERICA : This bit is what returns the different distances, you may want to apply a transition factor here
          return d.distance; 
        })
        .start();

// add links
    var link = svg.selectAll('.link')
        .data(links)
        .enter().append('line')
        .attr('class', 'link');

// add nodes
    var node = svg.selectAll('.node')
        .data(force.nodes())
        .enter()
    		.append('circle')
        .attr('class', 'node')
        .attr('r', width * 0.03);

// what to do 
    function tick(e) {
        
        node.attr('cx', function(d) { return d.x; })
            .attr('cy', function(d) { return d.y; })
            .call(force.drag);
            
        link.attr('x1', function(d) { return d.source.x; })
            .attr('y1', function(d) { return d.source.y; })
            .attr('x2', function(d) { return d.target.x; })
            .attr('y2', function(d) { return d.target.y; });
        
    }
    
</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js