1
我花了一天的時間試圖讓我的方形輪廓圖像在樹圖中創建。這是一個演示我的問題的小提琴。我已經評論過應該讓我做我想做的代碼。D3.js中的圓形圖像樹形圖
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);
我有兩個問題，一個是固定由下面的答案。另一方面，確保你的URL地址爲clippath是正確的。
我的圖是假設要顯示開/圖表/ 1這樣的代碼應該是
.attr("clip-path", "url(" + document.location.pathname + "#clip-circle)");