In response to a Stack Overflow question, Tree drawing orientation.
function getOrdinal(n) { | |
var s=["th","st","nd","rd"], | |
v=n%100; | |
return n+(s[(v-20)%10]||s[v]||s[0]); | |
} |
{ | |
"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"} | |
], |
This example demonstrates how to animate a path and a textPath at the same time. I wouldn’t use this technique—the text is scrunched up at the beginning of the arc at the beginning of the animation. Instead, I would use the arc to clip the text, so that the text is revealed as the arc expands.
This example also demonstrates two unfortunate bugs in WebKit browsers:
-
You can’t select textPath elements because of a bug in how WebKit handles case-sensitive element names. See bug 83438. WebKit shows no sign of fixing this bug, unfortunately.
-
Updating a path element by itself does not trigger redraw on dependent elements that reference this path. So, even though we update the path, the referencing textPath element will not be redrawn. To workaround this update bug, we create a custom transition that repeatedly sets the textPath’s xlink:href attribute to “#path”.
See [related Stack Overflow question](http://stackoverflow.com/questi
1. Get a list of php packages currently installed | |
``rpm -qa | grep php > packages.txt`` | |
2. yum remove php-common - This will depend on the current php version. For >= 5.4, it would be yum remove php54-common | |
3. yum remove httpd httpd-tools | |
4. yum install php55 php55-mysqlnd php55-gd php55-mbstring |
# set up tunnel | |
ssh -L localhost:3316:localhost:3316 -i /path/to/private-key user@host | |
# Check if the tunnel is established | |
netstat -lnp | grep ssh | grep :3316 |
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.