我正在研究图论,需要实时可视化图形。 (也就是说,如果图形数据发生变化,其表示也会随之变化。) InfoVis 似乎达到了这个目标,但我正在努力构建一个简单的“Hello, World”页面,该页面仅在屏幕上显示带有可点击节点的图形(点击会导致节点改变颜色)。
我有一个 JIT 的工作安装(给定的示例工作), 我只需要一个 InfoVis 的最小示例即可开始, 事实证明很难从文档中拼凑出一个。
最佳答案
这并不是最小的,但您可以删除更多的东西来实现它。我从 graph manipulation 中获取了代码例如,并删除了一些多余的 CSS 和 JS。
为了让节点改变颜色,我将这一行添加到“onClick”函数中:
node.data["$color"] = "#FF0000";
最小的元素似乎是:
- 一个 JSON 数据结构
- 实例化
$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);
关于javascript - Javascript InfoVis 工具包的 'Hello, World' 是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19072150/