4

I am doing research in graph theory and need to visualize graphs in real time. (That is, if the graph data changes, its representation changes with it.) InfoVis seems to meet that goal, but I am struggling to put together a simple 'Hello, World' page that just displays a graph on-screen with clickable nodes (where clicking causes the node to change color).

I have a working installation of JIT (the given examples work), I just need a minimal example of InfoVis to get started, and it is proving difficult to piece one together from the documentation.

4

1 回答 1

3

小提琴的例子。

这并不是最小的，但您可能可以删除更多的东西来做到这一点。我从图形操作示例中获取代码，并删除了一些多余的 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);
于 2013-09-28T22:44:12.157 回答