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>
    <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
  </head>

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

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

.d3-tip {
        line-height: 1;
        padding: 6px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        border-radius: 4px;
      }

.d3-tip:after {
        box-sizing: border-box;
        display: inline;
        font-size: 10px;
        width: 100%;
        line-height: 1;
        color: rgba(0, 0, 0, 0.8);
        content: "\25BC";
        position: absolute;
        text-align: center;
      }

.d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
      }
    </style>

var force = d3.layout.force();

var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
          return d.email;
        });

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

vis.call(tip);

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

var defs = vis.insert('svg:defs')
          .data(['end']);

defs.enter().append('svg:path')
          .attr('d', 'M0,-5L10,0L0,5');
 
        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();

var defs = vis.append('defs');

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

var filter = defs.append('filter')
          .attr('id', 'drop-shadow')
          .attr('height', '130%');

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",'red')
          .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');

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

function tick() {
          path.attr('d', function(d) {
            var dx = d.target.x - d.source.x;
            var dy = d.target.y - d.source.y;
            var dr = Math.sqrt(dx * dx + dy * dy);
            return 'M' + d.source.x + ','
              + d.source.y
              + 'A' + dr + ','
              + dr + ' 0 0,1 '
              + d.target.x + ','
              + d.target.y;
          });
          node.attr('transform', nodeTransform);    
        }
      }

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

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js