未捕获的SyntaxError：在D3树形图中带有鼠标悬停事件的意外的标记

Question

我正在使用D3编写一个可缩放的树形图。我以https://gist.github.com/vibster/3257874的基本代码开始。我包含整个代码的git，但将包括下面的相关部分。

对于cell变量，我在上面的回答中添加了一个鼠标悬停功能：Zoomable treemap with tooltips at the bottom，它应该提供悬停时的工具提示。

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

这导致了这个代码可变单元：

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

不幸的是，这会导致树形图完全无法显示了。我在Chrome控制台上做了一些挖掘工作，得到Uncaught SyntaxError: Unexpected token作为错误。我完全不熟悉JavaScript和D3，所以我不确定问题是什么。

Answer 1

错误Uncaught SyntaxError: Unexpected token可能是由它们在你的基本代码示例加载JavaScript文件造成的：https://gist.github.com/vibster/3257874 在头这些文件包含错误的URL到源代码：

<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> 

如果例如打开URL第一个源代码它包含HTML github页面，而不是Javascript源代码。您可以使用RawGit来获取带正确标题的原始Javascript文件。另外，上述的两行是无用的，因为treemap和hierarchy也由该行中的文件中定义的：

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

我创建的jsfiddle与您的代码（没有不必要的2线）和添加的元素<div id="tooltip"></div>其中包含工具提示：http://jsfiddle.net/usxcop8d/。您可以在鼠标悬停树状图贴图上看到树形图下的工具提示。