Javascript InfoVis Toolkit的“Hello, World”是什么？

Question

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

我已经安装了JIT（给定示例有效），我只需要一个最小的InfoVis示例来开始使用，从文档中拼凑出一个示例证明非常困难。

- Sean Allred

---

特意写成注释：我在编程方面并不是新手，但对于JS来说还是新手（至少超出了document.write的范围）。 - Sean Allred

Answer 1

这是一个Fiddle示例。

虽然不完全是最小化的，但你可以删除更多内容来使其变得更加简单。我从图形操作示例中取出了代码，并删除了一些多余的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);

- McGarnagle

---

你如何手动实例化init()函数（不使用body onload - 这可行吗？）例如使用jquery点击函数？ @McGarnagle - XT_Nova