D3スクリプトを関数として呼び出す方法

Question

D3スクリプトを関数として呼び出すことは可能ですか？具体的には、データセレクタを渡す？

私は1ヶ月間のデータを表示するのに使う単純なドーナツチャートを持っています。私はonClickイベントに基づいて、同じD3グラフィックを呼び出して、毎年異なるデータを渡すことができるようにしたいと思います。チャートが同じスペースに再描画されるようにします。

radio selectionが表示され、によってトリガーされ、D3スクリプトのセクションを再度実行してグラフィックを再描画するグラフがあります。しかし、D3スクリプトを関数としてセットアップするだけでは、別のデータを表示したいときはいつでも呼び出すことができますか？

私も(window.d3)を使用してD3関数を呼び出しchart hereを見てきましたが、すべての変数を渡すことがが可能になります(function(d3){...}の関数の定義のように見えるしていません。あるいは、私はそれがどのように実行されているのか正確には分かりません。

svg以外のクリックに基づいて反応チャートを作成する最も簡単な方法は何ですか？

Answer 1

私はリンクがあったのと同じ仕事をしました。私は、プロットに使う適切なJSONを選択するリンクの1つを選択することができました。以下は、関心のHTMLスニペットです -

 //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); 
        ... 

・ホープ、このことができます -

<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された選択をしているスニペット。