Javascript OOP，getters，setters，运行 - D3.js - 通过选项设置使图表可重新使用

Question

我自己尝试过，但显然我还不够好，无法完成这项工作:-)我想要实现的目标类似于迈克的可重用性演讲 - 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() {

   }

}

谢谢

卢卡斯

Answer 1

在 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