Domenic Quirl Domenic Quirl - 5 months ago 34
HTML Question

Visualizing a parse tree with d3.js

I've been trying to obtain a visual representation of a parse tree by generating an HTML file that uses d3.js to draw a tree. The file looks like this:

<!DOCTYPE html>
<meta charset="utf-8">
<head><title> Tree Visualization </title></head>
<script src="https://d3js.org/d3.v3.min.js"></script>

<script type="text/javascript">
function drawTree(o) {
d3.select("#"+o.divID).select("svg").remove()

var viz = d3.select("#"+o.divID)
.append("svg")
.attr("width", o.width)
.attr("height", o.height)

var vis = viz.append("g")
.attr("id","treeg")
.attr("transform", "translate("+ o.padding +","+ o.padding +")")

var tree = d3.layout.tree()
.size([o.width - (2 * o.padding), o.height - (2 * o.padding)]);

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });

var nodes = tree.nodes(o.treeData);

var link = vis.selectAll("pathlink")
.data(tree.links(nodes)).enter()
.append("path")
.attr("class", "link")
.attr("d", diagonal)

var node = vis.selectAll("g.node")
.data(nodes).enter()
.append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

node.append("circle")
.attr("r", 10)
.style("fill", function(d) { return (d.children) ? "#E14B3B" : "#1C8B98" });

node.append("svg:text")
.attr("dx", function(d) { return d.children ? 0 : 0; })
.attr("dy", function(d) { return d.children ? 5 : 5; })
.attr("text-anchor", function(d) { return d.children ? "middle" : "middle"; })
.style("fill", "white").text(function(d) { return d.name; })
}
</script>

<body onLoad="drawTree({divID: 'viz', width: 600, height: 400, padding: 50, treeData: {name: 'S', children: [{name: 'S', children: [{name: 'S', children: [{name: 'S', children: [{name: 'x'}]}, {name: 'S', children: [{name: 'y'}]}, {name: '*'}]}, {name: 'S', children: [{name: '1'}]}, {name: '+'}]}, {name: 'S', children: [{name: 'S', children: [{name: '1'}]}, {name: '-'}]}, {name: '+'}]}})">
<div id="viz"></div>
</body>
</html>


What I want it to look like:
this

What it currently looks like:
this

I'm completely new to d3.js and, to be honest, the code is taken from an example and only modified by me. I managed to get to this point this way, but I just can't figure out where it goes wrong.

I'd appreciate every bit of help. Thanks in advance!

Answer

Need to update the styles . Add below lines

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

Working fiddle