Javascript OOP, getters, setters, run - D3.js - 通过选项设置使图形可重用

Javascript OOP, getters, setters, run - D3.js - make graph resuable by option settings

本文关键字:设置 选项 图形 js getters OOP setters run Javascript D3      更新时间:2023-09-26

我试过自己,但不幸的是,我不够好,无法完成这项工作:-)我想要实现的类似于迈克的可重用性谈话 - http://bost.ocks.org/mike/chart/:

marbles = new Marbles();
marbles.width();//getter, setter
marbles.height();//-||-
...etc
marbles.run();//run the code

代码示例如下所示。有人可以帮我吗?我知道如何用Java或PHP制作类和OOP,但纯JS不是我的专业领域:-)

我有这个代码:

//initialize on (menu click)
jQuery(document).ready(function(){

       marbles();

    });
});

带有变量和主函数:

function marbles(){
    var height = 500,
        width = 1000;    

       var path = "";

..另一个变量(约 15 个)

       var force = d3.layout.force()        
          .size([width, height]);
       //foci to be set for relation type positioning and nodes placing
       var links = force.links(),
          nodes = force.nodes();

      run();
     //graph starts here by loading data - d3.xml
     function run (rootNode){
     begin();

     }
    //internal timer function - adding nodes one at the time
    function begin(clickedNode){  
   }
   //classical update function
   function update() {
   }
}

谢谢

卢卡斯

有几种方法可以在 JS 中执行 OOP。你可以在书中找到它们作者:JS大师

如果您只是想了解几个图表的工作原理,请看看鲍勃·蒙特维德(Bob Monteverde)如何在他的图表库中实现模型...https://github.com/novus/nvd3/tree/gh-pages/src/models我想你会从他的代码中学到很多东西。

在这个谷歌组线程中还有各种可重复使用图表的例子:https://groups.google.com/forum/#!searchin/d3-js/reusable$20charts/d3js/6VSl7srPYIo/iKNkxSr1YF0J