I am new in D3 and developing a family tree using d3v4(for some constraints not using latest version of d3. Though I am using latest d3 cdn but my requirement is d3v4). The family tree is vertical i.e., parent is in top and children are in bottom. But I want to turn the tree and want to make it horizontal i.e., parent is in left and children are in right. Kindly find my code below:
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 600)
.append("g").attr("transform", "translate(50, 50)");
var data = [
{
"child": {
"type": "from",
"name": "John",
"factor": 5
},
"parent": ""
},
{
"child": {
"type": "cc",
"name": "Kevin",
"factor": 4
},
"parent": {
"type": "from",
"name": "John",
"factor": 5
}
},
{
"child": {
"type": "bcc",
"name": "Mary",
"factor": 6
},
"parent": {
"type": "from",
"name": "John",
"factor": 5
}
},
{
"child": {
"type": "cc",
"name": "Mars",
"factor": 5
},
"parent": {
"type": "from",
"name": "John",
"factor": 5
}
}
]
var datastructure = d3.stratify()
.id(function(d) { return d.child.name; })
.parentId(function(d) { return d.parent.name; })
(data);
var treeStructure = d3.tree().size([500, 300]);
var information = treeStructure(datastructure);
// console.log(information.descendants());
// console.log(information.links());
var circles = svg.append("g").selectAll("circle")
.data(information.descendants());
var markerBoxWidth = 20;
var markerBoxHeight = 20;
var refX = markerBoxWidth / 2;
var refY = markerBoxHeight / 2;
var markerWidth = markerBoxWidth / 2;
var markerHeight = markerBoxHeight / 2;
var arrowPoints = [[0, 0], [0, 20], [20, 10]];
svg
.append('defs')
.append('marker')
.attr('id', 'arrow')
.attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight])
.attr('refX', refX)
.attr('refY', refY)
.attr('markerWidth', markerBoxWidth)
.attr('markerHeight', markerBoxHeight)
.attr('orient', 'auto-start-reverse')
.append('path')
.attr('d', d3.line()(arrowPoints))
.attr('fill', 'red');
circles.enter().append("circle")
.attr("cx", function(d) {
// console.log(d)
return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) {
//console.log()
return d.data.child.factor * 3;
})
.attr("fill", function(d) {
if (d.data.child.type === 'from') {
return "blue";
} else if (d.data.child.type === 'cc') {
return "yellow";
} else if (d.data.child.type === 'bcc') {
return "red";
}
});
var connections = svg.append("g").selectAll("path")
.data(information.links());
connections.enter().append("path")
.attr("d", function(d) {
console.log(d);
return "M" + d.source.x + "," + (d.source.y + (d.source.data.child.factor * 3))
+ " C " +
d.source.x + "," + (d.source.y + d.target.y)/2 + " " +
d.target.x + "," + (d.source.y + d.target.y)/2 + " " +
d.target.x + "," + (d.target.y - (d.target.data.child.factor * 3));
}).attr("fill", "none").attr("stroke", "red")
.attr('marker-end', 'url(#arrow)')
.attr('fill', 'none');
var names = svg.append("g").selectAll("text")
.data(information.descendants());
const xScale = d3.scaleLinear()
.domain([0, 8])
.range([0, 1000]);
names.enter().append("text")
.text(function(d) { return d.data.child.name; })
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
</script>
</body>
</html>
Thanks in advance.
