javascript - Javascript InfoVis 工具包的 'Hello, World' 是什么？

Question

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

我有一个 JIT 的工作安装(给定的示例工作)， 我只需要一个 InfoVis 的最小示例即可开始， 事实证明很难从文档中拼凑出一个。

Answer 1

Fiddle example.

这并不是最小的，但您可以删除更多的东西来实现它。我从 graph manipulation 中获取了代码例如，并删除了一些多余的 CSS 和 JS。

为了让节点改变颜色，我将这一行添加到“onClick”函数中:

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

最小的元素似乎是:

1. 一个 JSON 数据结构
2. 实例化$jit.ForceDirected对象，并调用loadJSON

还有一堆用于跨浏览器兼容性的样板代码(检查 Canvas 支持等)。

---

精简的 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);