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

标签 javascript d3.js d3plus

我现在正在使用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/

相关文章:

javascript - 动态D3力图

d3.js - Meteor,d3代码放在哪里?

javascript - 如何在 d3plus.full.js 中自定义环的工具提示?

javascript - 具有两级以上的可缩放树形图,D3plus?

javascript - 以用户时区显示日期/时间 - 在客户端

javascript - 就像我们可以在 Sass 中使用 _partials 一样,javascript 有类似的东西吗?

JavaScript 复选框只提交一个输入

javascript - D3力图渲染节点和链接

javascript - 获取未找到原始 fs 模块的警告

javascript - 如何在 d3plus/javascript 中传递 open.window() onclick 事件的路径?