In Chrome
If you use camelCase, the textPath works but you can't select it.
If you use lowercase, the textpath doesn't work but you can select it.
Cannot find camelCase element, will not render text on textPath if the element is inserted in lower case. |
This example demonstrates how to create a gradient that follows a stroke. This technique is sometimes used to indicate directionality along a curved edge, such as with hierarchical edge bundling.
To start, take any SVG path element and uniformly sample points along the path using getPointAtLength. (This method can also be used for path tweening.) Then, for each segment between adjacent points, compute the miter joint via line-line intersection. Lastly fill each segment by interpolating the start and end colors, here green to red, using the normalized length t along the path. Although each segment is a constant color, there are many segments to give the appearance of a continuous gradient.
This example uses a thin stroke in addition to filling the segments. This avoids antialiasing artifacts due to most
{ | |
"nodes":[ | |
{"name":"a", "group":1}, | |
{"name":"b", "group":2}, | |
{"name":"c", "group":3}, | |
{"name":"d", "group":4}, | |
{"name":"e", "group":5}, | |
{"name":"f", "group":6}, | |
{"name":"g", "group":7}, | |
{"name":"h", "group":1}, |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Force based label placement</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.6.0"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.6.0"></script> | |
</head> | |
<body> |
date | close | |
---|---|---|
10-May-12 | 99.55 | |
8-May-12 | 76.86 | |
6-May-12 | 67.62 | |
4-May-12 | 64.48 | |
2-May-12 | 60.98 | |
1-May-12 | 58.13 | |
30-Apr-12 | 53.98 | |
27-Apr-12 | 67.00 | |
26-Apr-12 | 89.70 |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
svg { | |
outline: 1px solid black; | |
} | |
</style> |
country | 2004 | 2008 | 2012 | |
---|---|---|---|---|
eu 28 none | 11.1 | 12.8 | ||
eu 28 one language | 35.7 | 36.6 | ||
eu 28 two languages | 53.1 | 50.6 | ||
eu 27 none | 8.3 | 11.2 | 12.9 | |
eu 27 one language | 54.7 | 35.9 | 36.7 | |
eu 27 two languages | 52.9 | 50.3 |
This example demonstrates using the zoom event to constrain the zoom behavior’s translation. This implementation is a bit heavy-handed, as the translate constraint is zoom-dependent.
41f89fa9b807699f7d0eeeb7a47fec1c60a55b80 | |
orientdb.js | |
getFamilytreeSingle | |
- This queries the db for the selected net and returns it: works fine | |
- Then the sub-net is returned to familytree-d3.js | |
- findDuplicatesAndSetEmpty checks if the subnet nodes are already in the main net and, if they are, deletes them from the sub-net | |
- then the remaining nodes on the sub-net are concatinated onto the main net. | |
- if the main net already contains the selected net the end result is nothing | |
getFamilytreeAll2 |