D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jebeck
Full window
Github gist
SVG groups as hooks for interaction
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title> Curved Text in SVG </title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> <style type="text/css"> svg { display: block; margin: 0 auto; } svg circle { opacity: 0.6; } svg text { dominant-baseline: central; font-family: monospace; font-size: 24px; } svg text.centered { text-anchor: middle; } </style> </head> <body> <svg version="1.1" xmlns="https://www.w3.org/2000/svg" width="864" height="450" viewbox="0 0 960 500"> <rect id="backgroundRect" width="960" height="500" x="0" y="0" fill="#ECECEC"></rect> <g class="thisIsAnExampleGroup"> <text x="125" y="130">{id: 'abc', value: 5}</text> <circle cx="810" cy="100" r="14.142135623730951" fill="#279191"></circle> <line x1="435" x2="735" y1="130" y2="100" stroke-width="1" stroke="black"></line> <text x="810" y="100" class="centered" fill="blue"><circle/></text> </g> <g class="thisIsAnExampleGroup"> <text x="125" y="210">{id: 'def', value: 10}</text> <circle cx="810" cy="200" r="20" fill="#279191"></circle> <line x1="445" x2="735" y1="210" y2="200" stroke-width="1" stroke="black"></line> <text x="810" y="200" class="centered" fill="blue"><circle/></text> </g> <g class="thisIsAnExampleGroup"> <text x="125" y="290">{id: 'ghi', value: 8}</text> <circle cx="810" cy="300" r="17.88854381999832" fill="#279191"></circle> <line x1="435" x2="735" y1="290" y2="300" stroke-width="1" stroke="black"></line> <text x="810" y="300" class="centered" fill="blue"><circle/></text> </g> <g class="thisIsAnExampleGroup"> <text x="125" y="370">{id: 'jkl', value: 3}</text> <circle cx="810" cy="400" r="10.95445115010332" fill="#279191"></circle> <line x1="435" x2="735" y1="370" y2="400" stroke-width="1" stroke="black"></line> <text x="810" y="400" class="centered" fill="blue"><circle/></text> </g> </svg> <script type="text/javascript"> d3.selectAll('.thisIsAnExampleGroup') .on('mouseover', function() { d3.select(this) .transition() .attr('transform', 'translate(0,' + -25 + ')'); }) .on('mouseout', function() { d3.select(this) .transition() .attr('transform', ''); }); </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js