D3 Examples - D3 Force Layout + Pixi.js Experiment

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.10/pixi.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <div id="container"></div>
  <script>
    var width = 700;
    var height = 500;
    var color = d3.scale.category20();
​
        var renderer = new PIXI.WebGLRenderer(800, 600, 
      { antialias: true, backgroundColor : 0xffffff });
        document.body.appendChild(renderer.view);
            
        // create the root of the scene graph
        var stage = new PIXI.Container();
​
    // function onDragStart(event)
    // {
    //     // store a reference to the data
    //     // the reason for this is because of multitouch
    //     // we want to track the movement of this particular touch
    //     this.data = event.data;
    //     this.alpha = 0.5;
    //     this.dragging = true;
    // }
​
    // function onDragEnd()
    // {
    //     this.alpha = 1;
    //     this.dragging = false;
​
    //     // set the interaction data to null
    //     this.data = null;
    //     force.start();
    // }
​
    // function onDragMove(e)
    // {
​
    //     if (this.dragging)
    //     {
    //         var newPosition = this.data.getLocalPosition(this);
    //         this.updateCircle(newPosition.x, newPosition.y);
    //         force.start();
    //     }
    // }
​
    
    function drawCircle(d,x,y,r,fill) {
      if (typeof fill === "string") {
        fill = parseInt(fill.substring(1), 16);
      }
​
      if (d._graphics) {
        d._graphics.clear();
      } else {
        d._graphics = new PIXI.Graphics();
        d._graphics.updateCircle = function(newx,newy) {
          drawCircle(d, newx, newy, r, fill);    
        }
      }
​
      d._graphics.lineStyle(0);
      d._graphics.beginFill(fill, 1);
      d._graphics.drawCircle(x,y,r);
      d._graphics.endFill();
      d._graphics.interactive = true;
      d._graphics.buttonMode = true;
      d._graphics.hitArea = new PIXI.Circle(x,y,r);
      d._graphics.click = function(e) {
        this.alpha = 0.5;
        force.start();
      }
​
      // d._graphics.on('mousedown', onDragStart)
      //   .on('touchstart', onDragStart)
      //   // events for drag end
      //   .on('mouseup', onDragEnd)
      //   .on('mouseupoutside', onDragEnd)
      //   .on('touchend', onDragEnd)
      //   .on('touchendoutside', onDragEnd)
      //   // events for drag move
      //   .on('mousemove', onDragMove)
      //   .on('touchmove', onDragMove);
​
      return d._graphics;
    }
​
    function drawEdge(d, x1,y1,x2,y2, width) {
​
      if (d._graphics) {
        d._graphics.clear();
      } else {
        d._graphics = new PIXI.Graphics();
      }
​
      d._graphics.lineStyle(width, 0xbbbbbb);
      d._graphics.beginFill(0xffffff, 0.5);
      d._graphics.moveTo(x1,y1);
      d._graphics.lineTo(x2,y2);
      d._graphics.endFill();
​
      return d._graphics;
    }
​
    var force = d3.layout.force()
      .charge(-120)
      .linkDistance(50)
      .size([width, height]);
​
    d3.json("lesmiserables.json", function(error, graph) {
      if (error) throw error;
​
      force
          .nodes(graph.nodes)
          .links(graph.edges || graph.links)
          .start();
​
      force.on("tick", function(d) {
        
        force.links().forEach(function(d) {
          var edge = drawEdge(d, d.source.x,
            d.source.y,
            d.target.x,
            d.target.y,
            Math.sqrt(d.value) || 1);
          stage.addChild(edge);
        });
​
        force.nodes().forEach(function(d){
          var circle = drawCircle(d, d.x, d.y, 10, color(d.group));  
          stage.addChild(circle);
        });
      });
​
      // run the render loop
      animate();
​
      function animate() {
          renderer.render(stage);
          requestAnimationFrame( animate );
      }
    });  </script>
</body>
​
    