JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<svg>
     <defs>
      <clipPath id="clip">
          <circle cx="0" cy="0" r="20"/>
      </clipPath>
  </defs>

</svg>

CSS

.node text {
  	font: 12px sans-serif;
}

.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 2px;
}

JavaScript

var data = [
      {
        "name": "Jules",
        "parent": "null",
        "facebookId": 100003252256072,
        "children": [
          {
            "name": "Shawn Spencer",
            "parent": "Jules",
            "facebookId": 104088302962435,
            "children": [
              {
                "name": "Carlton Lassiter",
                "parent": "Shawn Spencer",
                "facebookId": 126495827393151
              }
            ]
          },
          {
            "name": "Burton Guster",
            "parent": "Jules",
            "facebookId": 100002858896488
          }
        ]
      }
    ];
var svg, root, margin;
var width = 750;
var height = 500;
var margin = 50;
var count = 0;
var duration = 750;
var tree = d3.layout.tree().size([height, width])
var diagonal = d3.svg.diagonal().projection(function(d) {
    return [d.y, d.x];
});

var svg = d3.select('svg')
    .attr('width', width + margin + margin)
    .attr('height', height + margin + margin)
    .append('g')
    .attr('transform', 'translate(' + margin + ',' + margin + ')');



var root = data[0];
root.x0 = height / 2;
root.y0 = 0;

var update = function(source) {
            // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
            links = tree.links(nodes);

        // Normalize for fixed Depth
        nodes.forEach(function(d) {
            d.y = d.depth * 180;
        });

        // Update the nodes...
        var node = svg.selectAll('g.node')
            .data(nodes, function(d) {
                return d.id || (d.id = ++count);
            });

        var nodeEnter = node.enter().append('g')
            .attr('class', 'node')
            .attr('transform', function() {
                return 'translate(' + source.y0 + ',' + source.x0 + ')';
            })
            .on('click', this.nodeClicked);

    //PART THATS NOT WORKING
    


    // END

        nodeEnter.append('image')
            .attr('x', -20)
            .attr('y',...