Round images in D3.js Tree graph [duplicate] - d3.js

Question

This question already has an answer here:
D3 fill shape with image using pattern
(1 answer)
Closed 7 years ago.
I have spent over a day trying to get my square profile images to be round in the Tree graph Im creating. Here is a fiddle that demonstrates my problem. I have commented around the code that should allow me to do what I want.
http://jsfiddle.net/ssvuxb0k/4/
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 defs = svg.append("defs").attr("id", "imgdefs");
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
nodes.forEach(function(d, i) {
defs
.data(nodes)
.append('clipPath')
.attr('id', function(d) {
return 'clip-circle-' + i;
})
.append("circle")
.attr('id', function(d) {
return 'test-id-' + i;
})
.attr('transform', function(d) {
return 'translate(' + d.y + ',' + d.x + ')';
})
.attr("r", 20)
.attr("cy", 0)
.attr("cx", 0);
});
// END
nodeEnter.append('image')
.attr('x', -20)
.attr('y', -20)
.attr('width', 40)
.attr('height', 40)
.attr("xlink:href", function(d) {
return "https://graph.facebook.com/" + d.facebookId + "/picture";
})
.attr("clip-path", function(d, i) {
return "url(#clip-circle-" + i + ")";
});
nodeEnter.append('text')
.attr('x', function(d) {
return d.children || d._children ? -25 : 25;
})
.attr('dy', '.35em')
.attr('text-anchor', function(d) {
return d.children || d._children ? 'end' : 'start';
})
.text(function(d) {
return d.name;
})
.style('fill-opacity', 1e-6);
// Transition nodes to their new position
var nodeUpdate = node.transition()
.duration(duration)
.attr('transform', function(d) {
return 'translate(' + d.y + "," + d.x + ')';
});
nodeUpdate.select('circle')
.attr('r', 10);
nodeUpdate.select('text')
.style('fill-opacity', 1);
//Transition exiting nodes to the parents new position
var nodeExit = node.exit().transition()
.duration(duration)
.attr('transform', function() {
return 'translate(' + source.y + ',' + source.x + ')';
})
.remove();
nodeExit.select('image')
.style('opacity', 1e-6);
nodeExit.select('text')
.style('fill-opacity', 1e-6);
// Update the links...
var link = svg.selectAll('path.link')
.data(links, function(d) {
return d.target.id;
});
// Enter any new links at the parents previous position
link.enter().insert('path', 'g')
.attr('class', 'link')
.attr('d', function() {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}.bind(this));
//Transition links to their new position.
link.transition()
.duration(duration)
.attr('d', diagonal);
// Transition exiting nodes to the parents new position.
link.exit().transition()
.duration(duration)
.attr('d', function() {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
}.bind(this))
.remove();
// Stash the old positions for transition
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
};
update(root);
I had two issues, one was fixed by the answer below. The other, make sure that your URL location for the clippath is correct.
My graph was suppose to be displaying on /graph/1 so the code should be
.attr("clip-path", "url(" + document.location.pathname + "#clip-circle)");

Answer 1

You don't need to add a separate clip path for all the images.
Define one clip path like so:
<svg>
<defs>
<clipPath id="clip">
<circle cx="0" cy="0" r="20"/>
</clipPath>
</defs>
add the URL to the node and the circle will be applied to each image:
nodeEnter.append('image')
.attr('x', -20)
.attr('y', -20)
.attr('width', 40)
.attr('height', 40)
.attr("xlink:href", function(d) {
return "https://graph.facebook.com/" + d.facebookId + "/picture";
})
.attr("clip-path", "url(#clip)");
updated code: shown here in fiddle