Domenic Quirl Domenic Quirl - 8 months ago 274
HTML Question

Cannot read property error using d3.js

I've been trying to visualize a Parse Tree generated by a Python Script via HTML and d3.js. The Python Script generates an HMTL document that look like this:

<!DOCTYPE html>
<meta charset="utf-8">
<head><title> Tree Visualization </title></head>

<script src=""></script>
<script type="text/javascript">js</script>

<body onLoad="drawTree({divID: \'viz\', width: 600, height: 400, padding: 50, treeData: treeData})">
<div id="viz"></div>

is the Javascript code doing the d3 stuff

function drawTree(o) {"#"+o.divID).select("svg").remove()

var viz ="#"+o.divID)
.attr("width", o.width)
.attr("height", o.height)

var vis = viz
.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")
.attr("class", "link")
.attr("d", diagonal)

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

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

.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; });

is a JSON like representation of the tree.

What I now get is the error
Cannot read property 'tree' of undefined
in the
part, in the
var tree = ...
line. Most likely I'm just blind and you'll instantly see what I did wrong, but I've been staring at this for a while now...

Thanks in advance for any help!


It may be the version of d3 you are using, I see you are loading:

<script src=""></script>

It may be the case that in v4 there is no d3.layout.tree() object. Try switching to different version, may be this one:

<script src=""></script>

As the error says, it can be that d3.layout is undefined or d3.layout.tree() is undefined.