Uncaught SyntaxError: Unexpected token with mouseover event in D3 Treemap
Uncaught SyntaxError: Unexpected token with mouseover event in D3 Treemap
我正在使用 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 的新手,所以我不确定问题出在哪里。
错误 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/。您可以在鼠标悬停在树状图图块上的树状图下方看到工具提示。
我正在使用 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 的新手,所以我不确定问题出在哪里。
错误 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/。您可以在鼠标悬停在树状图图块上的树状图下方看到工具提示。