Switching between tree and force layouts.
tree and force layouts use both the node & link layout structure. d3.layout.tree() implicitly converts a node list with children into a link array. force introduces px and py into the node objects, which we remove when switching to the tree layout. Otherwise, when switching to the force layout once more, the already existing px and py would cause intial confusion and a non-smooth transition.
| # This script download all human genes from the NCBI 'gene' DB | |
| # and stores them in a local MySQL DB | |
| from Bio import Entrez | |
| import pymysql | |
| import pickle | |
| import sys | |
| # setup connection to local MySQL | |
| connection = pymysql.connect(host='localhost',user='userName',passwd='pw',db='dbname') |
| function recursiveChildren(obj) { | |
| for (var k in obj) { | |
| if (typeof obj[k] == "object" && obj[k] !== null) { | |
| if (obj.children === undefined) obj.children = []; // create empty children array | |
| obj[k].name = k; // add name | |
| obj.children.push(obj[k]) // add to children array | |
| recursiveChildren(obj[k]); // recursive call | |
| delete(obj[k]); // delete | |
| } else { | |
| if (obj.value === undefined) { // Add region size as value |
| chrom chromStart chromEnd name gieStain | |
| chr1 0 2300000 p36.33 gneg | |
| chr1 2300000 5400000 p36.32 gpos25 | |
| chr1 5400000 7200000 p36.31 gneg | |
| chr1 7200000 9200000 p36.23 gpos25 | |
| chr1 9200000 12700000 p36.22 gneg | |
| chr1 12700000 16200000 p36.21 gpos50 | |
| chr1 16200000 20400000 p36.13 gneg | |
| chr1 20400000 23900000 p36.12 gpos25 | |
| chr1 23900000 28000000 p36.11 gneg |
| // | |
| // UIImage+Category.h | |
| // ImageOverlay | |
| // | |
| // Created by Georg Tremmel on 29/04/2010. | |
| // | |
| #import <Foundation/Foundation.h> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script> | |
| <style type="text/css"> | |
| path { | |
| fill-rule: evenodd; | |
| fill: #00f; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script> | |
| <style type="text/css"> | |
| .link { stroke: #ccc; } | |
| .nodetext { pointer-events: none; font: 10px sans-serif; } | |
| </style> |
This example demonstrates how to add and remove nodes and links from a force layout. The graph initially appears with three nodes A, B and C connected in a loop. Three seconds later, node B is removed, along with the links B-A and B-C. At six seconds, node B is reintroduced, restoring the original links B-A and B-C. This example uses the general update pattern for data joins.
| 1 | |
| 2. | |
| _ee3efe_ |
| license: gpl-3.0 |