d3 未定义 - ReferenceError [英] d3 is not defined - ReferenceError
本文介绍了d3 未定义 - ReferenceError的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用位于 http://bl.ocks.org/的花式图"kerryrodden/7090426:
我的做法是下载代码并简单地编辑 CSV 文件以匹配我的数据.然后我只需在 Firefox 中打开 .html 文件即可查看交互式图形.但是，在另一台计算机上使用它时出现以下错误:
ReferenceError: d3 未定义序列.js:25
ReferenceError: d3 未定义 index.html:28
由于我对 d3 或 javascript 几乎一无所知，所以我有点迷茫.你们中的任何人都可以告诉我导致错误的原因以及我应该如何更正代码的提示吗?
我对代码做了一个改动，如下所示:
Javascript:
//旭日形的尺寸.无功宽度= 750；变量高度 = 600；var 半径 = Math.min(width, height)/2;//面包屑尺寸:宽度、高度、间距、尖端/尾部的宽度.无功b = {w: 75, h: 30, s: 3, t: 10};//步骤名称到颜色的映射.var 颜色 = {"G0": "#5687d1","G1": "#5c7b61","G2": "#de783b","G3": "#6ab975","G4": "#a173d1","G5": "#72d1a1",阿富汗":#615c7b"};//所有段的总大小；我们稍后在加载数据后进行设置.var totalSize = 0;var vis = d3.select("#chart").append("svg:svg").attr("宽度", 宽度).attr("高度", 高度).append("svg:g").attr("id", "容器").attr("transform", "translate(" + width/2 + "," + height/2 + ")");var 分区 = d3.layout.partition().size([2 * Math.PI, 半径 * 半径]).value(function(d) { return d.size; });var arc = d3.svg.arc().startAngle(function(d) { return d.x; }).endAngle(function(d) { return d.x + d.dx; }).innerRadius(function(d) { return Math.sqrt(d.y); }).outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });//使用 d3.text 和 d3.csv.parseRows 这样我们就不需要标题//行，并且可以接收 csv 作为数组的数组.d3.text("sequences.csv", function(text) {var csv = d3.csv.parseRows(text);var json = buildHierarchy(csv);创建可视化(json)；});//获得数据后，绘制和设置可视化的主要功能.函数创建可视化(json){//页面元素的基本设置.初始化面包屑轨迹()；drawLegend();d3.select("#togglelegend").on("click", toggleLegend);//旭日形下方的边界圆，使其更容易检测//当鼠标离开父 g 时.vis.append("svg:circle").attr("r", 半径).style("不透明度", 0);//为了效率，过滤节点只保留那些足够大的节点.var 节点 = partition.nodes(json).过滤器(功能(d){回报(d.dx > 0.005)；//0.005 弧度 = 0.29 度});节点 = 节点.过滤器(功能(d){返回(d.name！=结束")；//BJF:不显示结束"标记.});var path = vis.data([json]).selectAll("path").data(节点).enter().append("svg:path").attr("display", function(d) { return d.depth ? null : "none"; }).attr("d", 弧).attr("填充规则", "evenodd").style("fill", function(d) { return colors[d.name]; }).style("不透明度", 1).on("鼠标悬停"，鼠标悬停);//将 mouseleave 处理程序添加到边界圆.d3.select("#container").on("mouseleave", mouseleave);//从分区中获取树的总大小 = 根节点的值.totalSize = path.node().__data__.value;};//淡出除当前序列之外的所有内容，并将其显示在面包屑路径中.功能鼠标悬停(d){var 百分比 = (100 * d.value/totalSize).toPrecision(3);var百分比字符串 = 百分比 + "%";如果(百分比＜0.1){百分比字符串 = "<0.1%";}d3.select("#percentage").text(percentageString);d3.select("#explanation").style("可见性", "");var sequenceArray = getAncestors(d);更新面包屑(sequenceArray，百分比字符串)；//淡化所有段.d3.selectAll("路径").style("不透明度", 0.3);//然后仅突出显示当前段的祖先的那些.vis.selectAll("路径").过滤器(功能(节点){返回(sequenceArray.indexOf(节点)> = 0)；}).style("不透明度", 1);}//离开可视化时，将所有内容恢复为完全不透明.功能鼠标离开(d){//隐藏面包屑路径d3.select("#trail").style("可见性", "隐藏");//在过渡期间停用所有段.d3.selectAll("path").on("mouseover", null);//将每个段转换为完全不透明，然后重新激活它.d3.selectAll("路径").过渡().duration(1000).style("不透明度", 1).each("end", function() {d3.select(this).on("mouseover", mouseover);});d3.select("#explanation").过渡().duration(1000).style("可见性", "隐藏");}//给定分区布局中的节点，返回其所有祖先的数组//节点，最高的在前，但不包括根.函数 getAncestors(节点){var 路径 = [];无功电流 = 节点；而(当前.父母){path.unshift(当前)；当前 = current.parent;}返回路径；}函数 initializeBreadcrumbTrail() {//添加 svg 区域.var trail = d3.select("#sequence").append("svg:svg").attr("宽度", 宽度).attr("高度", 50).attr("id", "trail");//在最后添加标签，用于百分比.trail.append("svg:text").attr("id", "endlabel").style("填充", "#000");}//生成一个描述面包屑多边形点的字符串.功能面包屑点(d，我){var 点 = [];点推(0,0")；点推(b.w +，0")；points.push(b.w + b.t + "," + (b.h/2));points.push(b.w + "," + b.h);点推(0，"+ b.h)；if (i > 0) {//最左边的面包屑；不包括第 6 个顶点.points.push(b.t + "," + (b.h/2));}return points.join(" ");}//更新面包屑轨迹以显示当前序列和百分比.函数更新面包屑(节点数组，百分比字符串){//数据连接；key 函数结合了名称和深度(= 顺序位置).var g = d3.select("#trail").selectAll("g").data(nodeArray, function(d) { return d.name + d.depth; });//添加面包屑和标签以输入节点.var enter = g.enter().append("svg:g");enter.append("svg:polygon").attr(点"，面包屑点).style("fill", function(d) { return colors[d.name]; });enter.append("svg:text").attr("x", (b.w + b.t)/2).attr("y", b.h/2).attr("dy", "0.35em").attr(文本锚"，中间").text(function(d) { return d.name; });//设置进入和更新节点的位置.g.attr(转换"，函数(d，i){返回 "translate(" + i * (b.w + b.s) + ", 0)";});//删除退出节点.g.exit().remove();//现在移动并更新最后的百分比.d3.select("#trail").select("#endlabel").attr("x", (nodeArray.length + 0.5) * (b.w + b.s)).attr("y", b.h/2).attr("dy", "0.35em").attr(文本锚"，中间").text(percentageString);//使面包屑路径可见，如果它是隐藏的.d3.select("#trail").style("可见性", "");}函数 drawLegend() {//图例项的尺寸:宽度、高度、间距、圆角矩形的半径.var li = {w: 75, h: 30, s: 3, r: 3};var Legend = d3.select("#legend").append("svg:svg").attr("宽度", li.w).attr("height", d3.keys(colors).length * (li.h + li.s));var g = legend.selectAll("g").data(d3.entries(colors)).enter().append("svg:g").attr(转换"，函数(d，i){返回 "translate(0," + i * (li.h + li.s) + ")";});g.append("svg:rect").attr("rx", li.r).attr("ry", li.r).attr("宽度", li.w).attr("高度", li.h).style("fill", function(d) { return d.value; });g.append("svg:text").attr("x", li.w/2).attr("y", li.h/2).attr("dy", "0.35em").attr(文本锚"，中间").text(function(d) { return d.key; });}函数切换图例(){var Legend = d3.select("#legend");if (legend.style("visibility") == "hidden") {Legend.style("可见性", "");} 别的 {Legend.style("可见性", "隐藏");}}//取一个 2 列的 CSV 并将其转换为适合的层次结构//用于分区布局.第一列是一系列步骤名称，从//从根到叶，用连字符分隔.第二列是如何计数//这个序列经常发生.函数 buildHierarchy(csv) {var root = {"name": "root", "children": []};for (var i = 0; i < csv.length; i++) {var 序列 = csv[i][0];var size = +csv[i][1];if (isNaN(size)) {//例如如果这是标题行继续;}var 部分 = sequence.split("-");var currentNode = root;for (var j = 0; j HTML:
<头><meta charset="utf-8"><title>G1 客户的流程</title><script src="http://d3js.org/d3.v3.min.js"></script><link rel="stylesheet" type="text/css"href="https://fonts.googleapis.com/css?family=Open+Sans:400,600"><link rel="stylesheet" type="text/css" href="sequences.css"/><身体><div id="main"><div id="sequence"></div><div id="图表"><div id="explanation" style="visibility: hidden;"><span id="百分比"></span><br/>的 G1 客户遵循此流程.<div id="侧边栏"><input type="checkbox" id="togglelegend">图例<br/><div id="legend" style="visibility: hidden;"></div>