javascript - Visualizing a parse tree with d3.js -
i've been trying obtain visual representation of parse tree generating html file uses d3.js draw tree. file looks 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 want like: 
what looks like: 
i'm new d3.js and, honest, code taken example , modified me. managed point way, can't figure out goes wrong.
i'd appreciate every bit of help. in advance!
need update styles . add below lines
.link { fill: none; stroke: #ccc; stroke-width: 2px; } for node circle border
circle { stroke: #000; stroke-width: 1px; } working fiddle
Comments
Post a Comment