Uncaught SyntaxError: Unexpected token with mouseover event in D3 Treemap

Question

I am working on putting together a zoomable treemap using D3. I'm starting with basic code at https://gist.github.com/vibster/3257874. I'm including the git for the whole code, but will include the relevant section below.

To the cell variable, I am adding a mouse over function from this previous answer: Zoomable treemap with tooltips at the bottom that should provide a tool tip on hover.

  var cell = svg.selectAll("g")
              .data(nodes)
              .enter().append("svg:g")
              .attr("class", "cell")
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
              .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });

This results in this code for the variable cell:

var cell = svg.selectAll("g")
              .data(nodes)
              .enter().append("svg:g")
              .attr("class", "cell")
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
              .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
              .on('mouseover', function(d) {
                      // this variable will be used in a loop to store the current node being inspected
                      var currentNode = d;
                      // this array will hold the names of each subsequent parent node
                      var nameList = [currentNode.name];
                      // as long as the current node has a parent...
                      while (typeof currentNode.parent === 'object') {
                        // go up a level in the hierarchy
                        currentNode = currentNode.parent;
                        // add the name to the beginning of the list
                        nameList.unshift(currentNode.name);
                      }
                      // now nameList should look like ['flare','animate','interpolate']
                      //  join the array with slashes (as you have in your example)
                      nameList = nameList.join('/');
                      // now nameList should look like 'flare/animate/interpolate'
                      //  use this to set the tooltip text
                      $('#tooltip').text('Mouse hovering ' + nameList + '. Cell size = ' + d.area);
                }   

Unfortunately, this results in the treemap not showing up at all. I did some digging in the Chrome Console and am getting this error:

Uncaught SyntaxError: Unexpected token

I'm completely new to Javascript and D3 so I'm not sure what the issue is.

Answer 1

The error Uncaught SyntaxError: Unexpected token is probably caused by Javascript files which are loaded in your basic code example: https://gist.github.com/vibster/3257874 These files in the header contains bad url to source code:

<script type="text/javascript" src="https://github.com/mbostock/d3/blob/master/src/layout/treemap.js"></script>
<script type="text/javascript" src="https://github.com/mbostock/d3/blob/master/src/layout/hierarchy.js"></script>

If you open the url e.g. of the first source It contains HTML github page, not Javascript source code. You could use RawGit to get raw Javascript files with proper headers. In addition, the two lines mentioned above are useless because treemap and hierarchy are also defined in the file loaded by this line:

<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>

I created the jsfiddle with your code (without unnecessary 2 lines) and added the element <div id="tooltip"></div> which contains the tooltip: http://jsfiddle.net/usxcop8d/. You could see the tooltip beneath the treemap on mouseover treemap tiles.