Question

我正在尝试将D3条形图嵌入到我的网站中，如下所示：

从这个配方中：http://bl.ocks.org/erikvullings/51cc5332439939f1f292但是动态的樱桃服务器给我一个错误。

如果我从该页面获取HTML并将其托管在我的静态服务器上，则可以正常工作。示例：http://feedbackcommons.org/s/test.html

javascript错误是这样的：

<script>
// Color scale
var color = d3.scale.category20();
</script>
Uncaught TypeError: Cannot read property 'category20' of undefined

我尝试剥离所有其他D3配方JS代码，仅包括上面显示的那一行。不过，我仍然出错。因此页面上的其他内容正在干扰。但是我无法通过将代码剪切并粘贴到简单的HTML文件中并加载到另一台静态服务器上来重新创建错误。

我猜标题JS中有问题，但是如果我将其包含在静态服务器的测试页中，则可以正常加载。

我正在使用https://d3js.org版本4.9.1。

以下是完整的HTML / JS标头内容：

<html lang="en" dir="ltr" class="js"><head>
<link rel="profile" href="http://www.w3.org/1999/xhtml/vocab">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://love.feedbackcommons.org/static/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="canonical" href="http://love.feedbackcommons.org">
<title>Explore Your Survey</title>
<script src="/static/js/jquery-1.9.1.min.js"></script>
<script src="/static/js/jquery-1.8.0.min.js"></script>
<!-- <script src="/static/js/jquery.easing.min.js" type="application/javascript"></script> -->
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.min.js"></script>
<script src="/static/js/d3-scale-chromatic.min.js"></script>
<script src="/static/js/d3pie.min.js"></script>
<script src="/static/js/jquery.tablesorter.min.js"></script>
<script src="/static/js/jquery.tablesorter.widgets.min.js"></script>
<script src="/static/js/widget-filter-formatter-jui.min.js"></script>
<script src="/static/js/widget-math.min.js"></script>
<script src="/static/js/bootstrap-tour-standalone.min.js"></script>
<script src="/static/js/word_wrap.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/theme.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/filter.formatter.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/theme.jui.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap-tour-standalone.min.css">
<link href="/static/css/bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js" charset="UTF-8"></script>
<script type="text/javascript" src="/s/bootstrap-tokenfield/dist/bootstrap-tokenfield.js" charset="UTF-8"></script>
<style>
  @import url("/static/css/system.base.css");
</style>
<style>
  @import url("/static/css/date.css");
  @import url("/static/css/datepicker.1.7.css");
  @import url("/static/css/field.css");
  @import url("/static/css/node.css");
  @import url("/static/css/views.css");
  @import url("/static/css/admin_menu.css");
  @import url("/static/css/admin_menu.uid1.css");
</style>
<style>
  @import url("/static/css/ctools.css");
</style>
<style>
    @import url("/static/css/style.css");
</style>
<!-- HTML5 element support for IE6-8 -->
<!--[if lt IE 9]>
  <script src="//cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
  <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.min.js"></script>
<![endif]-->
<script src="/static/js/drupal/jquery.min.js?v=1.8.3"></script>
<script src="/static/js/drupal/jquery.once.js?v=1.2"></script>
<script src="/static/js/drupal/drupal.js"></script>
<script src="/static/js/admin_devel.js"></script>
<script src="/static/js/admin_menu.js"></script>
<script src="/static/js/devel_krumo_path.js"></script>
<script src="/static/js/drupal/affix.js"></script>
<script src="/static/js/drupal/alert.js"></script>
<script src="/static/js/drupal/button.js"></script>
<script src="/static/js/drupal/carousel.js"></script>
<script src="/static/js/drupal/collapse.js"></script>
<script src="/static/js/drupal/dropdown.js"></script>
<script src="/static/js/drupal/modal.js"></script>
<script src="/static/js/drupal/tooltip.js"></script>
<script src="/static/js/drupal/popover.js"></script>
<script src="/static/js/drupal/scrollspy.js"></script>
<script src="/static/js/drupal/tab.js"></script>
<script src="/static/js/drupal/transition.js"></script>
<script type="text/javascript">
    function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
      e.style.display = 'none';
    else
      e.style.display = 'block';
    }
</script>

那么我获得

的原因有哪些？

Uncaught TypeError: Cannot read property 'category20' of undefined

如果d3.scale.category20()（d3.scale未定义）是否在我的服务器之外可以使用相同的D3版本？

d3.scale.category20（）给出未捕获的TypeError：无法读取未定义的属性“ category20”

0 个答案: