Skip to content

Instantly share code, notes, and snippets.

@jebeck

jebeck/.gitignore

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jebeck/7bd314e41ad84b3eca6f to your computer and use it in GitHub Desktop.
Save jebeck/7bd314e41ad84b3eca6f to your computer and use it in GitHub Desktop.
Download ZIP
SVG groups as hooks for interaction
Raw
index.html
<!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="http://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">&lt;circle/&gt;</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">&lt;circle/&gt;</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">&lt;circle/&gt;</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">&lt;circle/&gt;</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment