Javascript 示例中使用SVG和画布混合的D3可视化

我正在学习D3，发现要控制所有的运动部件是相当痛苦的。在复习了一些基础知识并阅读了几本书的章节之后，我决定尝试将我自己的数据绑定到一个流行的、更复杂的Mike Bostock示例，该示例可以在wild（）中找到。我认为这与我将在现实生活中使用的工作流非常相似，而不是从头开始编写viz

这是我当前的代码（）

以下是我的问题：

• 为什么我的Javascript没有影响SVG
• 如何通过变换/平移重新缩放900 X 500 SVG（或875 X 480画布）中的X轴和Y轴
• 由于Javascript不会影响SVG，因此不会绑定任何数据。为什么?

我相信有一天我会明白这一点，但我的意识水平目前还不允许

最后，在我迄今为止完成的几个D3中，我选择了一个简化的模板，如下所示：

函数图（数据）{
“严格使用”；
//把你的函数放在这里
}
//在此处对数据调用绘图函数
//d3.json（“data/data_file.json”，draw）；
//将svg/画布放在这里

我建议您不要尝试改编《纽约时报》的例子。那里的代码被缩小了，因此很难阅读。另外，它看起来使用的是d3.v2，目前已经过时了。最后，我快速查看一下您的代码笔，您将d3输出的SVG剪切并粘贴到HTML窗口中，其次，我看不出您在哪里调用了

draw

函数……感谢您的肯定。。我的结论是，我最好的选择是关闭这个特定的示例，然后使用一个更坚固的示例。我仍然很好奇这是怎么做到的。我没有找到类似的例子。你对哪一件感兴趣？这只是一个简单的散点图，每个圆的半径都不同。这是我刚刚整理的一个例子。你的例子确实有助于简化。我仍在尝试将x轴的格式设置为从1970年到2015年的日期，但有一些奇怪的事情正在发生。目前，它正在接受自动设置刻度的域范围。我读这篇（）的时候运气不好——它完全令人困惑。特别是Axis看起来不直观。请参阅更新的datetime x轴示例。