D3 Tree layout modified
CSS
body {
font: 13px/13px Arial;
background-color: #f1f1f1;
margin: 20px;
}
.rect {
fill: #ddd;
}
.remove-icon {
fill: #eee;
}
.remove-icon-group {
cursor: pointer;
}
.remove-icon-group:hover .remove-icon {
fill: #fff;
}
.line {
position: relative;
z-index: 0;
}
JavaScript
var data = {
name: 'Lorem',
children: [{
name: 'Lorem ipsum',
children: [{
name: 'Dolor',
children: [{
name: 'Sit'
}, {
name: 'Amet'
}, {
name: 'Consectetur'
}]
}, {
name: 'Adipiscing'
}, {
name: 'Elit'
}]
}, {
name: 'Vivamus aca sdas dasd a',
children: [{
name: 'Ornare sem'
}]
}]
};
var GAP = 30;
var svg = d3.select('body').append('svg');
svg.attr('width', 700)
.attr('height', 400);
var tree = d3.layout.tree().size([600, 300]);
function update() {
var nodes = tree.nodes(data);
nodes.forEach(function (d, i) {
d.index = d.parent ? d.parent.children.indexOf(d) : 0;
d.width = getNameLength(d.name);
if (!hasNephewOrChildren(d)) {
d.x = getHorizontalPosition(d)
d.y = (d.parent ? d.parent.y : 0) + 40;
d.mode = 'horizontal';
} else {
d.x = d.depth > 1 ? d.parent.width + GAP: d.depth * (GAP*2);
d.y = getVerticalPosition(d);
d.mode = 'vertical';
}
});
svg.selectAll('g.node').remove();
var node = svg.selectAll('.node')
.data(nodes)
.enter()
.append('g')
.style('opacity', 1)
.attr('class', 'node')
.attr('visibility', function (d) {
return d.depth ? 'visible' : 'hidden'
})
.attr('transform', function (d, i) {
return 'translate(' + d.x + ',' + d.y + ')'
});
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
var paths = svg.selectAll('g.node').append("path")
.attr("d", function(d){
return lineFunction(generatePath(d));
})
.attr("stroke", "#aaa")
...