如何将D3脚本称为函数

时间:2017-08-04 19:41:51

标签: javascript d3.js svg

是否可以将D3脚本作为函数调用?特别是传递数据选择器?

我有一个简单的圆环图,我用它来显示一个月的数据。我希望能够回忆起相同的D3图形,并根据onClick事件为一年中的每个月传递不同的数据。因此,图表将在同一空间重绘。

我已经看到其他图表radio selectiononchange触发,再次运行D3脚本的一部分来重绘图形。但是,我不能将我的D3脚本设置为函数,并且只要我想显示不同的数据就调用它吗?

我还看到chart here使用(window.d3)调用D3函数,但似乎(function(d3){...}的函数定义不允许传递任何变量。或许我也不能确切地理解这是如何执行的。

根据svg外的点击完成反应图表的最简单方法是什么?

1 个答案:

答案 0 :(得分:1)

我做了一个类似的工作,我有链接,我可以选择其中一个链接来选择适用于情节的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);
                    ...

希望这有帮助。