Question

我是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)参数。

当脚本在HTML中工作得很好时，任何人都可以帮助我在Observable中收到此错误的原因吗？我该如何解决？

如Alpesh Jikadra注释和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中组织代码以及如何修复它时，我有什么想法？

提前感谢您的帮助！

Answer 1

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

事件 - 丢弃模块期望d3只是在窗口对象上“闲逛”。这并不理想：模块应该真正声明它们的依赖关系并用AMD加载它们，但无论如何 - 它不是一个破坏者。我添加了一个设置window.d3 = d3的单元格，这使得事件丢失感到高兴。这是抱怨timeFormat的问题 - 它希望d3.timeFormat能够在那里。

[另外]我为输出创建了一个单元格，现在在d3.select(events)而不是d3.select('#events')中引用该单元格。有关原因的一个解释，请参阅the little observer：单元格依赖于彼此运行所需的顺序，因此最好根据引用变量将d3.select之类的内容连接到页面上的元素，而不是使用像‘#events’这样的字符串来选择页面上的元素。

为什么我在Observable中获取JavaScript未定义属性但不在HTML中？

1 个答案: