如何将D3与JavaScript事件一起使用

我试图在点击按钮时绘制d3图表。 但是我看过的所有d3教程都说d3代码应该放在元素中 您希望显示图表。这意味着d3代码将在页面加载时执行，但 希望代码仅在单击按钮时运行

我还想知道是否可以将我的d3代码放在一个封装在函数中的外部文件中 我可以随时打电话。如果否，我如何创建在单击时显示d3图表的按钮

HTML

查看以下内容：

先编辑CSS

#presentation {
   ...
   display: none;
}

然后在按钮上添加一个空白类

<input type="button" Value="show" class="example" />

使用jQuery

<script>
     $(".example").click(function () {
         $('#presentation').fadeIn("slow");
     });
</script>  

$（“.example”）。单击（函数（）{
$（“#演示”）.fadeIn（“慢”）；
});

结果:

加载页面时将看不到presentation div。当有人点击带有示例类的按钮时，就会看到它

您还可以使用切换（）、滑动切换（）或淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡

我希望这有帮助…：/

---

另外，如果您尝试此解决方案

在

部分添加此代码

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

---

在

之前使用页面底部的jQuery代码“我还想知道我是否可以将我的d3代码放在一个外部文件中，该文件封装在一个函数中，我可以在需要时调用该函数。”是的，你可以这样做，这正是你应该做的。D3示例是在页面加载中加载的，因为用户不必做任何其他事情来显示示例。您的用例是不同的，所以您将代码放在一个函数中并调用按钮单击。那太好了！的确它起作用了。愚蠢的我。谢谢。你凭什么认为OP使用jQuery？

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>