Collapsible force layout w/ images

Force layout test/experiment with images

Sources:

forked from eesur's block: d3 | Force layout with images

forked from anonymous's block: d3 | Force layout with images

forked from MattDionis's block: Collapsible force layout w/ images

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>

<body>
    <style>
      path.link {
        fill: none;
        stroke-width: 3px;
      }

.node:not(:hover) .nodetext {
        display: none;
      }

div.tooltip {
        position: absolute;
        text-align: center;
        padding: 6px;
        font: 13px sans-serif;
        color: white;
        background-color: black;
        border-radius: 5px;
        pointer-events: none;
      }
    </style>

var force = d3.layout.force();

var tooltip = d3.select('body').append('div')
        .attr('class', 'tooltip')
        .style('opacity', 0);

var vis = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);

d3.selection.prototype.moveToBack = function() { 
        return this.each(function() { 
          var firstChild = this.parentNode.firstChild; 
          if (firstChild) { 
            this.parentNode.insertBefore(this, firstChild); 
          } 
        }); 
      };

d3.json('data.json', function(json) {
        root = json;
        root.fixed = true;
        root.x = width / 2;
        root.y = height / 4;

update();
      });

function update() {
        var nodes = flatten(root);
        var links = d3.layout.tree().links(nodes);

var path = vis.selectAll('path.link')
          .data(links, function(d) {
            return d.target.id;
          });

path.enter().insert('svg:path')
          .attr('class', 'link')
          .attr('marker-end', 'url(#end)')
          .style('stroke', '#eee');

path.exit().remove();

force.nodes(nodes)
          .links(links)
          .gravity(0.05)
          .charge(-1500)
          .linkDistance(100)
          .friction(0.5)
          .linkStrength(function(l, i) {return 1; })
          .size([width, height])
          .on('tick', tick)
          .start();

defs = vis.append('defs');

var clipPath = defs.append('clipPath')
          .attr('id', 'clip-circle')
          .append('circle')
          .attr('r', 25);

var node = vis.selectAll('g.node')
          .data(nodes, function(d) {
            return d.customerId;
          });

node.exit().remove();

path = vis.selectAll('path.link');
        node = vis.selectAll('g.node');

filter.append('feGaussianBlur')
            .attr('in', 'SourceAlpha')
            .attr('stdDeviation', 3)
            .attr('result', 'blur');

filter.append('feOffset')
            .attr('in', 'blur')
            .attr('result', 'offsetBlur');

filter.append("feFlood")
            .attr("in", "offsetBlur")
            .attr("flood-color",color)
            .attr("flood-opacity", "1")
            .attr("result", "offsetColor");

filter.append("feComposite")
            .attr("in", "offsetColor")
            .attr("in2", "offsetBlur")
            .attr("operator", "in")
            .attr("result", "offsetBlur");

var feMerge = filter.append('feMerge');

feMerge.append('feMergeNode')
            .attr('in', 'offsetBlur')
          feMerge.append('feMergeNode')
            .attr('in', 'SourceGraphic');  
        }
        return 'url(#'+id+")"
      }
      function nodeTransform(d) {
        if (!d.scale) {
          d.scale = 1;
        }
        d.x =  Math.max(maxNodeSize, Math.min(width - (d.imgwidth / 2 || 16), d.x));
        d.y =  Math.max(maxNodeSize, Math.min(height - (d.imgheight / 2 || 16), d.y));
        return "translate(" + d.x + "," + d.y + ")scale(" + d.scale + ")";
      }

function flatten(root) {
        var nodes = []; 
        var i = 0;

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js