Javascript InfoVis Toolkit的'Hello，World'是什麼？

我正在研究圖論，需要實時可視化圖表。（也就是說，如果圖形數據發生變化，它的表示會隨之變化）。 InfoVis似乎可以達到這個目標，但我正在努力將一個簡單的'Hello，World'頁面放在一起，該頁面只是在屏幕上顯示一個圖形可點擊的節點（點擊導致節點改變顏色）。Javascript InfoVis Toolkit的'Hello，World'是什麼？

我有JIT（給出的實例工作）的工作安裝，我只需要InfoVis的一個小例子上手，它被證明是很難從文檔拼湊一個在一起。

來源

2013-09-28 Sean Allred

故意寫成評論：我不是新來通過任何想象力編程，但我是JS的新手（至少除了'document.write'之外的任何東西）。 –

Fiddle example.

這不完全是最小的，但你也許可以刪除一些更多的東西是真的。我從graph manipulation示例中獲取代碼，並刪除了一些多餘的CSS和JS。

要獲取的節點改變顏色，我添加這條線的「的onClick」功能：

node.data["$color"] = "#FF0000";

的最小元件似乎是：

一個JSON數據結構
實例化$jit.ForceDirected對象，並致電loadJSON

還有一堆用於跨瀏覽器兼容性的樣板代碼（檢查畫布支持等）。

的削減的JSON結構看起來是這樣的：

// define three nodes 
var json = [ 
    { // first node 

     // node identifier 
     id: "graphnode1", 

     // node label 
     name: "A graph node (#1)" 

     // the node's color, shape, and size 
     data: { 
      $color: "#FFFFFF", 
      $type: "circle", 
      $dim: 10 
     }, 

     // this node is adjacent to nodes 2 and 3 
     adjacencies: [ 
      "graphnode2", 
      { 
       nodeTo: "graphnode2", 
       // make the connector blue 
       data: { 
        "$color": "#0000FF" 
       } 
      }, 
      "graphnode3", 
      { 
       nodeTo: "graphnode3", 
      } 
     ] 
    }, 

    // second node 
    { 
     id: "graphnode2", 
     name: "Another graph node (#2)" 
    }, 

    // third node 
    { 
     id: "graphnode3", 
     name: "Another graph node (#3)" 
    } 
];

這裏的初始代碼的輪廓：

var json = { 
    // structure here 
}; 
var fd = new $jit.ForceDirected({ 

    // create canvas in "infovis" DOM element 
    injectInto: 'infovis', 

    // many other options here 
}); 
fd.loadJSON(json);

來源

2013-09-28 22:44:12 McGarnagle

如何手動實例化init（）函數（而不是使用body onload - 可能嗎？），例如使用jquery點擊函數？ @McGarnagle –

Javascript InfoVis Toolkit的'Hello，World'是什麼？

回答

相關問題