Question

我正在进行图论研究，需要实时可视化图形。（也就是说，如果图形数据发生变化，其表示会随之改变。） InfoVis似乎达到了这个目标，但我正在努力将一个简单的“Hello，World”页面放在一起，它只是在屏幕上显示一个带有可点击节点的图形（点击导致节点改变颜色）。

我有一个JIT的工作安装（给定的例子工作），我只需要一个InfoVis的最小例子即可开始使用，事实证明很难从文件中拼凑出来。

Answer 1

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);

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

1 个答案: