gpt4 book ai didi

javascript - 使用 d3plus.js 动态更改网络图表

转载 作者:行者123 更新时间:2023-12-03 10:31:53 26 4
gpt4 key购买 nike

我现在正在使用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”节点。

JSBin example

注意:我发现的还有 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com