如何調用D3腳本作爲函數

是否可以將D3腳本作爲函數調用？特別要傳遞數據選擇器？如何調用D3腳本作爲函數

我有一個簡單的甜甜圈圖表，我用它來顯示一個月的數據。我希望能夠根據onClick事件召回相同的D3圖形，併爲每年的每個月傳遞不同的數據。這樣圖表就會在同一個空間重新繪製。

我看過其他圖表有radio selection，由onchange觸發，它再次運行D3腳本的一部分來重繪圖形。但是，我可以不只是將D3腳本設置爲一個函數，並且每當我想顯示不同的數據時都調用它。

我也看到一個chart here調用D3函數使用(window.d3)，但它似乎並不像(function(d3){...}函數定義將允許任何變量傳遞。或者，也許我不明白如何執行。

基於svg之外的點擊來完成反應圖表的最簡單方法是什麼？

2017-08-04 Keith

將d3加載爲庫時，d3將成爲可供您使用的全局對象，因此您可以從任何位置執行'd3.select ...'等操作。從onchange事件的回調中的單選按鈕角度來看，你能不能僅僅做'd3.select（'element'）。doSomething（）'？ – aug

@aug我不太確定。我找不到任何人正在寫作爲函數的d3實例。我想知道問題的一部分是否也是變量範圍？ – Keith

d3網站上有很多例子，但它看起來像你接受了下面的答案。我希望你真的明白這是否有助於回答你的問題，但是當你檢測到一個變化事件時，你可以從任何地方調用d3，因爲d3是作爲一個全局變量添加到窗口對象上的。 – aug

我做了一個類似的工作，我有鏈接，我可以選擇其中一個鏈接來選擇合適的JSON用於劇情。下面是感興趣的HTML片段 -

<ul class="dropdown-menu" role="menu"> 
        <li><a class="m" value="2014-02-19" href="#">2014-02-19</a></li> 
        <li><a class="m" value="2014-02-20" href="#">2014-02-20</a></li> 
        <li><a class="m" value="2014-02-21" href="#">2014-02-21</a></li> 
        <li><a class="m" value="2014-02-22" href="#">2014-02-22</a></li> 
        <li><a class="m" value="2014-02-23" href="#">2014-02-23</a></li> 
       </ul> 
...

這是JavaScript片段做選擇 -

 //On click, update with new data    
     d3.selectAll(".m") 
      .on("click", function() { 
       var date = this.getAttribute("value"); 

       var str; 
       if(date == "2014-02-19"){ 
        str = "19.json"; 
       }else if(date == "2014-02-20"){ 
        str = "20.json"; 
       }else if(date == "2014-02-21"){ 
        str = "21.json"; 
       }else if(date == "2014-02-22"){ 
        str = "22.json"; 
       }else{ 
        str = "23.json"; 
       } 

       d3.json(str,function(json){ 

        dataset = json; 
        stack(dataset); 
        ...

希望這有助於。

來源

2017-08-04 20:02:23

這看起來很不錯。謝謝。 – Keith

你有沒有把你的完整代碼貼在任何地方？我有選擇的工作，但我無法讓它重繪圖形。我沒有在任何地方使用堆棧，所以我想我不知道該在那裏打電話。 – Keith

我還沒有。但會這樣做。 –

如何調用D3腳本作爲函數

回答

相關問題