d3 未定义 - ReferenceError

Posted 2023-02-16

【中文标题】d3 未定义 - ReferenceError

【英文标题】：d3 is not defined - ReferenceError

【发布时间】：2014-02-18 07:20:03

【问题描述】：

我正在尝试使用在http://bl.ocks.org/kerryrodden/7090426 找到的“精美图表”：

我的做法是下载代码并简单地编辑 CSV 文件以匹配我的数据。然后我只需在 Firefox 中打开 .html 文件即可查看交互式图表。但是，在另一台计算机上使用它会出现以下错误：

ReferenceError: d3 is not defined sequences.js:25

ReferenceError: d3 is not defined index.html:28

由于我对 d3 或 javascript 几乎一无所知，我有点迷茫。 你们中的任何人都可以提示我是什么导致了错误以及我应该如何更正代码吗？

我对代码进行了一次修改，使其如下：

Javascript：

// Dimensions of sunburst.
var width = 750;
var height = 600;
var radius = Math.min(width, height) / 2;

// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = 
  w: 75, h: 30, s: 3, t: 10
;

// Mapping of step names to colors.
var colors = 
  "G0": "#5687d1",
  "G1": "#5c7b61",
  "G2": "#de783b",
  "G3": "#6ab975",
  "G4": "#a173d1",
  "G5": "#72d1a1",
  "Afgang": "#615c7b"
;

// Total size of all segments; we set this later, after loading the data.
var totalSize = 0; 

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g")
    .attr("id", "container")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var partition = d3.layout.partition()
    .size([2 * Math.PI, radius * radius])
    .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); );

// Use d3.text and d3.csv.parseRows so that we do not need to have a header
// row, and can receive the csv as an array of arrays.
d3.text("sequences.csv", function(text) 
  var csv = d3.csv.parseRows(text);
  var json = buildHierarchy(csv);
  createVisualization(json);
);

// Main function to draw and set up the visualization, once we have the data.
function createVisualization(json) 

  // Basic setup of page elements.
  initializeBreadcrumbTrail();
  drawLegend();
  d3.select("#togglelegend").on("click", toggleLegend);

  // Bounding circle underneath the sunburst, to make it easier to detect
  // when the mouse leaves the parent g.
  vis.append("svg:circle")
      .attr("r", radius)
      .style("opacity", 0);

  // For efficiency, filter nodes to keep only those large enough to see.
  var nodes = partition.nodes(json)
      .filter(function(d) 
      return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
      );

  nodes = nodes.filter(function(d) 
      return (d.name != "end"); // BJF: Do not show the "end" markings.
      );


  var path = vis.data([json]).selectAll("path")
      .data(nodes)
      .enter().append("svg:path")
      .attr("display", function(d)  return d.depth ? null : "none"; )
      .attr("d", arc)
      .attr("fill-rule", "evenodd")
      .style("fill", function(d)  return colors[d.name]; )
      .style("opacity", 1)
      .on("mouseover", mouseover);

  // Add the mouseleave handler to the bounding circle.
  d3.select("#container").on("mouseleave", mouseleave);

  // Get total size of the tree = value of root node from partition.
  totalSize = path.node().__data__.value;
 ;

// Fade all but the current sequence, and show it in the breadcrumb trail.
function mouseover(d) 

  var percentage = (100 * d.value / totalSize).toPrecision(3);
  var percentageString = percentage + "%";
  if (percentage < 0.1) 
    percentageString = "< 0.1%";
  

  d3.select("#percentage")
      .text(percentageString);

  d3.select("#explanation")
      .style("visibility", "");

  var sequenceArray = getAncestors(d);
  updateBreadcrumbs(sequenceArray, percentageString);

  // Fade all the segments.
  d3.selectAll("path")
      .style("opacity", 0.3);

  // Then highlight only those that are an ancestor of the current segment.
  vis.selectAll("path")
      .filter(function(node) 
                return (sequenceArray.indexOf(node) >= 0);
              )
      .style("opacity", 1);


// Restore everything to full opacity when moving off the visualization.
function mouseleave(d) 

  // Hide the breadcrumb trail
  d3.select("#trail")
      .style("visibility", "hidden");

  // Deactivate all segments during transition.
  d3.selectAll("path").on("mouseover", null);

  // Transition each segment to full opacity and then reactivate it.
  d3.selectAll("path")
      .transition()
      .duration(1000)
      .style("opacity", 1)
      .each("end", function() 
              d3.select(this).on("mouseover", mouseover);
            );


  d3.select("#explanation")
      .transition()
      .duration(1000)
      .style("visibility", "hidden");


// Given a node in a partition layout, return an array of all of its ancestor
// nodes, highest first, but excluding the root.
function getAncestors(node) 
  var path = [];
  var current = node;
  while (current.parent) 
    path.unshift(current);
    current = current.parent;
  
  return path;


function initializeBreadcrumbTrail() 
  // Add the svg area.
  var trail = d3.select("#sequence").append("svg:svg")
      .attr("width", width)
      .attr("height", 50)
      .attr("id", "trail");
  // Add the label at the end, for the percentage.
  trail.append("svg:text")
    .attr("id", "endlabel")
    .style("fill", "#000");


// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) 
  var points = [];
  points.push("0,0");
  points.push(b.w + ",0");
  points.push(b.w + b.t + "," + (b.h / 2));
  points.push(b.w + "," + b.h);
  points.push("0," + b.h);
  if (i > 0)  // Leftmost breadcrumb; don't include 6th vertex.
    points.push(b.t + "," + (b.h / 2));
  
  return points.join(" ");


// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString) 

  // Data join; key function combines name and depth (= position in sequence).
  var g = d3.select("#trail")
      .selectAll("g")
      .data(nodeArray, function(d)  return d.name + d.depth; );

  // Add breadcrumb and label for entering nodes.
  var entering = g.enter().append("svg:g");

  entering.append("svg:polygon")
      .attr("points", breadcrumbPoints)
      .style("fill", function(d)  return colors[d.name]; );

  entering.append("svg:text")
      .attr("x", (b.w + b.t) / 2)
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d)  return d.name; );

  // Set position for entering and updating nodes.
  g.attr("transform", function(d, i) 
    return "translate(" + i * (b.w + b.s) + ", 0)";
  );

  // Remove exiting nodes.
  g.exit().remove();

  // Now move and update the percentage at the end.
  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-anchor", "middle")
      .text(percentageString);

  // Make the breadcrumb trail visible, if it's hidden.
  d3.select("#trail")
      .style("visibility", "");



function drawLegend() 

  // Dimensions of legend item: width, height, spacing, radius of rounded rect.
  var li = 
    w: 75, h: 30, s: 3, r: 3
  ;

  var legend = d3.select("#legend").append("svg:svg")
      .attr("width", 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("transform", function(d, i) 
              return "translate(0," + i * (li.h + li.s) + ")";
           );

  g.append("svg:rect")
      .attr("rx", li.r)
      .attr("ry", li.r)
      .attr("width", li.w)
      .attr("height", 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-anchor", "middle")
      .text(function(d)  return d.key; );


function toggleLegend() 
  var legend = d3.select("#legend");
  if (legend.style("visibility") == "hidden") 
    legend.style("visibility", "");
   else 
    legend.style("visibility", "hidden");
  


// Take a 2-column CSV and transform it into a hierarchical structure suitable
// for a partition layout. The first column is a sequence of step names, from
// root to leaf, separated by hyphens. The second column is a count of how 
// often that sequence occurred.
function buildHierarchy(csv) 
  var root = "name": "root", "children": [];
  for (var i = 0; i < csv.length; i++) 
    var sequence = csv[i][0];
    var size = +csv[i][1];
    if (isNaN(size))  // e.g. if this is a header row
      continue;
    
    var parts = sequence.split("-");
    var currentNode = root;
    for (var j = 0; j < parts.length; j++) 
      var children = currentNode["children"];
      var nodeName = parts[j];
      var childNode;
      if (j + 1 < parts.length) 
   // Not yet at the end of the sequence; move down the tree.
    var foundChild = false;
    for (var k = 0; k < children.length; k++) 
      if (children[k]["name"] == nodeName) 
        childNode = children[k];
        foundChild = true;
        break;
      
    
  // If we don't already have a child node for this branch, create it.
    if (!foundChild) 
      childNode = "name": nodeName, "children": [];
      children.push(childNode);
    
    currentNode = childNode;
       else 
    // Reached the end of the sequence; create a leaf node.
    childNode = "name": nodeName, "size": size;
    children.push(childNode);
      
    
  
  return root;
;

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flow for G1 customers</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"/>
  </head>
  <body>
    <div id="main">
      <div id="sequence"></div>
      <div id="chart">
        <div id="explanation" style="visibility: hidden;">
          <span id="percentage"></span><br/>
          of G1 customers follow this flow.
        </div>
      </div>
    </div>
    <div id="sidebar">
      <input type="checkbox" id="togglelegend"> Legend<br/>
      <div id="legend" style="visibility: hidden;"></div>
    </div>
    <script type="text/javascript" src="sequences.js"></script>
    <script type="text/javascript">
      // Hack to make this example display correctly in an iframe on bl.ocks.org
      d3.select(self.frameElement).style("height", "700px");
  </script> 
  </body>
</html>

【问题讨论】：

此错误表示包含 D3 库未成功。不过，看起来您已将其包含在脚本中，因此我不确定问题出在哪里。您是否收到任何其他错误消息？

遗憾的是，没有其他错误。我的另一台电脑有一些严格的安全设置，这会导致问题吗？是否可以通过将库放在同一个文件夹中或以不受安全设置影响的类似方式来包含该库？

可能下载不了。您可以下载 D3 脚本，将其放在同一文件夹中并调整源中的路径。

谢谢，这行得通！它似乎只在 Firefox 中有效，但这不是问题:) 请随时回答我的问题以关闭线程。

请问您是如何捕获和生成gif 的？

【参考方案1】：

这个回复太晚了，但上述解决方案没有一个适合我。不过我找到了解决办法！

我使用的是 macOS Catalina。出于某种奇怪的原因，它原来是来自 Observable 网站的 .tgz 文件的解压缩/解压问题。我使用名为 The Unarchiver 的应用程序来解压缩文件，但在这种情况下，.tgz 文件没有正确解压缩。与未使用相同程序的朋友的计算机相比，缺少文件夹和文件。

解决方案：我在没有第三方程序的情况下解压了 .tgz - 只使用了 macOS（只需双击文件）。然后，我在本地加载了页面，它工作了！

如果双击文件解压失败，请尝试在终端中运行tar -xzf filename.tgz。

【参考方案2】：

可能存在阻止您的浏览器下载 D3 脚本的安全限制。您可以做的是下载脚本，将它们与文件放在同一文件夹中，然后更改源中的引用路径。

【参考方案3】：

我只是将我对包的引用作为我的 head 标签中的第一个导入：

<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
...
...
</head>

似乎对我有用

【参考方案4】：

对于像我这样的 JavaScript 菜鸟 - 问题可能是您没有正确导入它。尝试阅读import docs 之类的内容：

import * as d3 from 'd3-transition'

【参考方案5】：

您可能还需要添加：

<meta charset="utf-8">

或

<meta content="utf-8" http-equiv="encoding">

到你的头部

【讨论】：

对我来说完全有效。拉丁编码没有，所以字符不能很好地工作。谢谢。

【参考方案6】：

更新：现在有一个d3-webpack-loader package，可以很容易地在 webpack 中加载 d3。我不是这个包的创建者，我只是用它来看看它是否有效。这是一个简单的例子。

// Install the loader
npm install --save d3-webpack-loader

// Install the d3 microservices you need
npm install --save d3-color
npm install --save d3-selection

在我们的entry.js 文件中，我们将要求d3 使用d3-webpack-loader 和：

const d3 = require('d3!');

然后可以使用一些d3 方法：

d3.selectAll("p").style("color", d3.color("red").darker());

【参考方案7】：

如果您使用的是 Visual Studio，您可以转到工具 -> 选项 -> 文本编辑器 -> JavaScript -> IntelliSense 并选中“下载远程引用”框。这对我有用。

【参考方案8】：

有同样的问题，虽然我最初认为是因为浏览器的安全限制，但事实并非如此。当我将字符集添加到脚本标记时它起作用了，如下所示：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

d3 文档中也显示了相同的内容，但并未具体提及此问题：http://d3js.org/

是的，在本地也可以。

<script src="d3.min.js"></script>

这是完整的例子：

<!doctype html>
<html>
<head>
    <title>D3 tutorial</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <!--<script src="d3.min.js"></script>-->
</head> 
<body>
    <script>
        var canvas = d3.select("body")
                        .append("svg")
                        .attr("width", 500)
                        .attr("height", 500);
        var circle = canvas.append("circle")
                        .attr("cx",250)
                        .attr("cy", 250)
                        .attr("r", 50)
                        .attr("fill", "red");
    </script>
</body> 
</html>

【讨论】：

非常有趣的是，一旦它起作用，即使删除了字符集（是的，清除缓存），它似乎也可以在那里工作。最初它也不能在 Firefox 和 Chrome 上运行！

就我而言，我只需要添加在线示例源中缺少的“http:”，然后它就可以在 Firefox 中使用。具体来说，我把<script src="//d3js.org/d3.v3.min.js"></script>换成了<script src="http://d3js.org/d3.v3.min.js"></script>

charset="utf-8" 也适合我。 @Bobz，你能说出原因吗？

【参考方案9】：

将 替换为

【参考方案10】：

我不得不做一个grunt build 来摆脱这个错误。 （使用 Yeoman 和 Ember.js。）

【参考方案11】：

如果浏览器没有阻止它下载并仍然出现错误，则应将d3.js放在jquery之前。

【讨论】：

未来的读者应该知道，即使这样也可能导致非常相似的错误。 +1