我现在正在使用D3plus对一些网络进行可视化。图书馆。我想做的是根据对象的键显示不同的网络,例如年。有一个working example带有tree_map图表。但我无法对网络实现相同的功能。
这是我的代码:
<!doctype html>
<meta charset="utf-8">
<script src="http://www.d3plus.org/js/d3.js"></script>
<script src="http://www.d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var sample_data = [
{"name": "point1", "year": 1994},
{"name": "point2", "year": 1994},
{"name": "point3", "year": 1994},
{"name": "point4", "year": 1994},
{"name": "point5", "year": 1994},
{"name": "point6", "year": 1994},
{"name": "point7", "year": 1994},
{"name": "point8", "year": 1994},
{"name": "point9", "year": 1994},
{"name": "point10", "year": 1994},
{"name": "point11", "year": 1994},
{"name": "point12", "year": 1995}
]
var positions = [
{"name": "point1", "x": 3, "y": 7},
{"name": "point2", "x": 2, "y": 6},
{"name": "point3", "x": 4, "y": 6},
{"name": "point4", "x": 1, "y": 5.5},
{"name": "point5", "x": 5, "y": 5.5},
{"name": "point6", "x": 2, "y": 4},
{"name": "point7", "x": 4, "y": 4},
{"name": "point8", "x": 1, "y": 3},
{"name": "point9", "x": 5, "y": 3},
{"name": "point10", "x": 2, "y": 1.5},
{"name": "point11", "x": 4, "y": 1.5},
{"name": "point12", "x": 2, "y": 7}
]
var connections = []
var visualization = d3plus.viz()
.container("#viz")
.type("network")
.data(sample_data)
.nodes(positions)
.edges(connections)
.id("name")
.time({"value": "year", "solo": 1994})
.draw()
</script>
我需要在时间轴上单击时显示不同的节点,以便通过选择 1995 仅应显示“point12”节点。
注意:我发现的还有 an opened issue ,但也许这个功能从那时起就已经实现了。
最佳答案
可以监听时间线触发的事件,并在年份范围发生变化时运行自定义代码。这是对 a post 中某些内容的重新解释来自 D3plus 的 Google Group:
visualization.time({"solo": {
"callback": function(timeline_range) {
// update the nodes/edges
visualization.nodes(new_nodes).edges(new_edges).draw();
}
}});
关于javascript - 使用 d3plus.js 动态更改网络图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29175440/