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

Question

我正在研究圖論，需要實時可視化圖形。 （也就是說，如果圖形數據發生變化，其表示會隨之改變。）InfoVis似乎達到了這個目標，但我正在努力將一個簡單的“Hello，World”頁面組合在一起，該頁面只顯示一個帶有可點擊節點的圖形（點擊導致節點改變顏色）。

我有一個JIT的工作安裝（給定的例子工作），我只需要一個InfoVis的最小例子來開始，並且證明很難從文檔中拼湊一個。

Answer 1

小提琴的例子。

這並不是最小的，但你可以刪除更多的東西來實現它。 我從圖形操作示例中獲取代碼，並刪除了一些多余的CSS和JS。

為了讓節點改變顏色，我在“onClick”函數中添加了這一行：

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

最小元素似乎是：

1. 一個JSON數據結構
2. 實例化$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);