Click in the open space to add a node, drag from one node to another to add an edge.
Ctrl-drag a node to move the graph layout.
Click a node or an edge to select it.
When a node is selected: R toggles reflexivity, Delete removes the node.
When an edge is selected: L(eft), R(ight), B(oth) change direction, Delete removes the edge.
To see this example as part of a larger project, check out Modal Logic Playground!
| { | |
| "nodes": [ | |
| {"name": "d3"}, | |
| {"name": "d3.svg"}, | |
| {"name": "d3.svg.area"}, | |
| {"name": "d3.svg.line"}, | |
| {"name": "d3.scale"}, | |
| {"name": "d3.scale.linear"}, | |
| {"name": "d3.scale.ordinal"} | |
| ], |
| .module { | |
| overflow-y: scroll; /* has to be scroll, not auto */ | |
| -webkit-overflow-scrolling: touch; | |
| } |
This example pulls together various examples of work with trees in D3.js.
The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.
One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.
Dragging can be performed on any node other than root (flare). Dropping can be done on any node.
Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.
Designed by Stephen Few, a bullet chart “provides a rich display of data in a small space.” A variation on a bar chart, bullet charts compare a given quantitative measure (such as profit or revenue) against qualitative ranges (e.g., poor, satisfactory, good) and related markers (e.g., the same measure a year ago). Layout inspired by Stephen Few. Implementation based on work by Clint Ivy, Jamie Love of N-Squared Software and Jason Davies. The "update" button randomizes the values slightly to demonstrate transitions.
A series of related examples:
| // Credit Christopher Chiche & Clemens Tolboom | |
| // - http://stackoverflow.com/a/14426477/2806996 | |
| d3.selection.prototype.moveToFront = function() { | |
| return this.each(function(){ | |
| this.parentNode.appendChild(this); | |
| }); | |
| }; | |
| d3.selection.prototype.moveToBack = function() { | |
| return this.each(function() { |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var w = 960, | |
| h = 500, | |
| nodes = [], | |
| node; |
Click to add new points. Hit the DELETE key to remove the selected point. Use the dropdown menu to change the interpolation mode.
