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

【问题标题】：How do I use D3 with JavaScript events如何将 D3 与 JavaScript 事件一起使用
【发布时间】：2014-01-25 23:34:59
【问题描述】：

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

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

HTML

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

<div id="presentation">
<!-- bar charts to show up here when the "show" button is clicked.
     The button makes an ajax call and gets a json that contains data
     that will be used to draw the chart.
 -->
</div>

【问题讨论】：

“我也想知道我是否可以将我的 d3 代码放在一个外部文件中，该文件包含在我想要调用的函数中。” 是的，你可以这样做那正是你应该做的。 D3 示例在页面加载时加载，因为用户无需执行任何其他操作即可显示示例。您的用例不同，因此您将代码放在一个函数中并在按钮单击时调用。没关系！
确实！有用。愚蠢的我。谢谢。

标签： javascript html d3.js

【解决方案1】：

看看这个：http://jsfiddle.net/rUtS5/

先编辑 CSS

#presentation {
   ...
   display: none;
}

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

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

使用 jQuery

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

结果：

页面加载时将看不到演示文稿 div。当有人单击具有示例类的按钮时，它将被看到。

您也可以使用 toggle()、slideToggle() 或 fadeToggle() 函数代替 fadeIn() 用于显示/隐藏属性。

希望对你有帮助...：/

附：如果您尝试此解决方案

将此代码添加到<head> 部分

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

并在页面底部</body>之前使用jQuery代码

【讨论】：

是什么让你认为 OP 使用 jQuery？