Javascript InfoVis工具包的“你好，世界”是什么？

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