opacity

A simple way to handle if there are multiple links between to nodes in the force directed layout implemented in D3.js.

by navinleon

HTML

<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>
<div id="graphContainer" class="graphContainer">
</div>

CSS

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;
}
svg{
  border: 1px solid #000;
}

.graphContainer {
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

JavaScript

$(function(){
    var data = {
        "nodes": [
        ]
    };	
    
    for(var i=0;i<50;i++){
data.nodes.push({ "id": 1, "name": "E",
x_diff: Math.random() < 0.5 ? 1 : -1,
            y_diff: Math.random() < 0.5 ? 1 : -1,
            speed: Math.random() * 5,
            checked: false})
    }
    


    var w = 600,
        h = 200,
        radius = 16;
    
    var force = d3.layout.force()
                  .nodes(d3.values(data.nodes))
                  .size([w, h])
                  .charge(-100)
                  .on("tick", tick)
                  .start();
    
    var svg = d3.select(".graphContainer").append("svg:svg")
                .attr("width", w)
                .attr("height", h);
                
    var circle = svg.append("svg:g")
                    .selectAll("circle")
                    .data(force.nodes())
                    .enter().append("svg:circle")
                    .attr("r", radius)
                    .style("opacity", 0)
                    .attr("transform",'translate(347.63787841796875,215.92420959472656)')
                    .transition()
                    .delay(function(d,i){console.log(i,d); return i * 20 })
                    .style("opacity", 1);
    
    var text = svg.append("svg:g")								  
                  .selectAll("g")
                  .data(force.nodes())
                  .enter().append("svg:g");

    
    
    // Use elliptical arc path segments to doubly-encode directionality.
    function tick(e) {
       
        
        circle
        //.each(gravity(e.alpha))
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
        
        
    }
    
   window.setTimeout( ()=>{d3.timer(animate)},1000)

function animate(elapsed) {

    circle.call(checkCollision);

    circle
        .attr('cx', function(d) {
            d.x = d.x + (d.speed * d.x_diff);
            if (d.x <= 0 || d.x >= w) {
                d.x_diff = d.x_diff * -1;
       ...