Uncaught SyntaxError: Unexpected token with mouseover event in D3 Treemap

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 header 中的这些文件包含错误的 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 获取带有适当 header 的原始 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/。您可以在鼠标悬停在树状图图块上的树状图下方看到工具提示。

Uncaught SyntaxError: Unexpected token with mouseover event in D3 Treemap

Uncaught SyntaxError: Unexpected token with mouseover event in D3 Treemap

javascript

d3.js

dom-events

mouseover

treemap