我是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 = d3and that makes event-drops happy. This was the issue that complained abouttimeFormat- it expectedd3.timeFormatto just be there.[Also] I created a cell for the output, and now reference that in
d3.select(events)instead ofd3.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 liked3.selectto 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/