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

Question

我正在研究图论，需要实时可视化图。（也就是说，如果图形数据发生变化，其表示形式也会随之变化。InfoVis 似乎达到了这个目标，但我正在努力整理一个简单的"你好，世界"页面，该页面只在屏幕上显示一个带有可点击节点的图表（单击会导致节点改变颜色）。

我有一个 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);