未捕获的语法错误。在D3树形图中，鼠标移动事件中出现了意外的标记。

Question

我正在使用D3制作一个可缩放的树形图。我从以下的基本代码开始 https:/gist.github.comvibster3257874. 我把整个代码的git包括在内，但会在下面包括相关部分。

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

这就导致了变量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);
                }   

不幸的是，这导致树形图根本没有显示出来。我在 Chrome 控制台中进行了一些调查，得到了这个错误。

Uncaught SyntaxError.Unexpected token: 非预期的标记

我对Javascript和D3完全陌生，所以我不知道问题出在哪里。

Answer 1

错误 Uncaught SyntaxError: Unexpected token 可能是由您的基本代码示例中加载的Javascript文件引起的。https:/gist.github.comvibster3257874这些文件的头部包含了错误的源代码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（没有多余的两行），并添加了元素。<div id="tooltip"></div> 其中包含工具提示。http:/jsfiddle.netusxcop8d。. 你可以在鼠标移到treemap瓷砖上看到treemap下面的工具提示。