如何使用D3與JavaScript事件

正在嘗試一個按鈕被點擊時要畫出D3圖表。但是我見過的所有d3教程都說d3代碼應該放在要顯示圖表的元素之內。這意味着d3代碼將在頁面加載時執行，但我想要代碼僅在單擊按鈕時運行。如何使用D3與JavaScript事件

我也想知道我是否可以將我的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>

來源

2014-01-25 kassold

*「我也想知道如果我可以把我的D3代碼在一個外部文件中包裹一個函數，我可以在需要時調用它。「*是的，你可以做到這一點，這正是你應該做的。 D3示例在頁面加載時加載，因爲用戶不需要執行其他任何操作來顯示示例。你的用例是不同的，所以你把代碼放在一個函數中，然後調用按鈕單擊。這非常好！ –

確實！有用。愚蠢的我。謝謝。 – kassold

檢查了這一點：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不會被看到的頁面加載時。當有人點擊具有示例類的按鈕時，它將被看到。

您還可以使用切換（），的slideToggle（）或fadeToggle（），而不是功能淡入（）用於顯示/隱藏屬性。

我希望它可以幫助...：/

附：如果您嘗試此解決方案

在<head>部分

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

添加以下代碼之前在頁面的底部使用jQuery代碼</body>

來源

2014-01-26 04:05:54

是什麼讓你認爲OP使用jQuery？ –

如何使用D3與JavaScript事件

回答

相關問題