javascript - Change network chart dynamically with d3plus.js -
i'm working on visualization of networks using d3plus library. want show different networks depending on key of object, e.g. year. there working example tree_map chart. couldn't implement same network.
here code:
<!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> i need show different nodes on click @ timeline, choosing 1995 "point12" node should shown.
note: have found an opened issue, maybe functionality implemented since time.
it's possible listen event triggered timeline , run custom code when year range changes. here re-interpretation of in a post google group d3plus:
visualization.time({"solo": { "callback": function(timeline_range) { // update nodes/edges visualization.nodes(new_nodes).edges(new_edges).draw(); } }});
Comments
Post a Comment