个人中心
gpt4 book ai didi

javascript - 为什么我在 Observable 中获得 JavaScript 未定义属性，但在 HTML 中却没有？

转载 作者：行者123 更新时间：2023-11-29 15:15:39 26 4
gpt4 key购买 nike

我是trying to use Mike Bostock's 'Observable' to re-create a simple HTML webpage ，但我在引用绘制图表的代码行时遇到 TypeError: Cannot read property 'timeFormat' of undefined，即:

d3.select('#events').data([repositoriesData]).call(chart);

作为visible in my notebook ，错误指向 .call(chart) 参数。

任何人都可以帮助我为什么在 Observable 中出现此错误当脚本在 HTML 中运行良好时？我该如何解决？

正如 Alpesh Jikadra 所证明的那样comment 和 jsFiddle(如下)，JavaScript 函数在嵌入标准 HTML 页面时工作正常:

<!DOCTYPE html>
<html>
<!--https://jsfiddle.net/6rqxusw5/9/-->
  <head>
    <link href="https://unpkg.com/event-drops/dist/style.css" rel="stylesheet" />
  </head>

  <body>
    <h1>Event Drops</h1>
    <div id="events"></div>
  </body>

  <script src="https://unpkg.com/d3@4.13.0/build/d3.min.js"></script>
  <script src="https://unpkg.com/event-drops/dist/index.js"></script>

  <script>
  const repositoriesData = [{
      name: "intake",
        data: [
            { date: new Date('03/02/2018 6:55:11 PM') },
          { date: new Date('03/02/2018 10:56:11 PM') },
          { date: new Date('03/03/2018 6:57:11 AM') },
        ]
  }, {
      name: "eligibility",
        data: [
            { date: new Date('03/03/2018 6:58:09 PM') },
            { date: new Date('03/03/2018 11:58:09 PM') },        ]
  }, {
    name: "assessment",
        data: [
            { date: new Date('03/04/2018 6:59:09 PM') }
        ]
  }, {
    name: "dispute resolution",
        data: [
            { date: new Date('03/05/2018 7:01:09 AM') }
        ]
  }, {
    name: "compliance",
        data: [
            { date: new Date('03/05/2018 7:05:09 PM') }
        ]
  }, {
      name: "closure",
        data: [
          { date: new Date('03/05/2018 11:12:07 PM') }
        ]
  }];

  var chart = eventDrops({
      range: {
          start: new Date('03/01/2018 6:55:11 PM'),
          end: new Date('03/06/2018 7:15:11 PM')
        },
        drop: {
            date: d => d.date,
        },
  });

  d3.select('#events').data([repositoriesData]).call(chart);
  </script>


</html>

关于我在 Observable 中的代码组织方面做错了什么以及如何修复它，有什么想法吗？

预先感谢您的帮助!

最佳答案

此答案由 Tom MacWright 提供在Observable help forum ，在 Jared Smith 的提示下我提出了问题:

The event-drops module expects d3 to be just ‘hanging around’ on the window object. This isn’t ideal: modules should really declare their dependencies and load them with AMD, but anyway - it’s not a dealbreaker. I added a cell that sets window.d3 = d3 and that makes event-drops happy. This was the issue that complained about timeFormat - it expected d3.timeFormat to just be there.

[Also] I created a cell for the output, and now reference that in d3.select(events) instead of d3.select('#events'). See the little observer for one explanation of why: cells run the order that they need to depending on each other, so it’s best to connect things like d3.select to elements on the page based on referencing variables, rather than using strings like ‘#events’ to select elements on the page.

关于javascript - 为什么我在 Observable 中获得 JavaScript 未定义属性，但在 HTML 中却没有？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49588421/

26 4 0
文章推荐： mysql - 在 MySQL 触发器中将值设置为变量
文章推荐： Javascript - 内联与包含 - 加载或运行有区别吗？
文章推荐： php - 类型 : ArgumentCountError Message: Too few arguments to function
文章推荐： javascript - Freecodecamp 中的 Javascript 代码错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com