Created
March 8, 2017 20:12
-
-
Save psbolden/f42c85becc0d95c815d04645dd955f88 to your computer and use it in GitHub Desktop.
d3plus text wrapping example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Source: https://bl.ocks.org/davelandry/a39f0c3fc52804ee859a | |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="//d3plus.org/js/d3.js"></script> | |
| <script src="//d3plus.org/js/d3plus.js"></script> | |
| <style> | |
| svg { | |
| font-family: "Helvetica", "Arial", sans-serif; | |
| height: 425px; | |
| margin: 25px; | |
| width: 900px; | |
| } | |
| .type { | |
| fill: #888; | |
| text-anchor: middle; | |
| } | |
| .shape { | |
| fill: #eee; | |
| stroke: #ccc; | |
| } | |
| </style> | |
| <svg> | |
| <!-- Text that will use the D3plus default wrapping. --> | |
| <text class="type" dy="15px" x="75px">Wrapped</text> | |
| <rect class="shape" height="150px" width="150px" y="50px"></rect> | |
| <text id="rectWrap" class="wrap" y="50px" font-size="12"> | |
| Here is a long text string that SVG should wrap by default, but it does not. | |
| </text> | |
| <circle class="shape" r="75px" cx="75px" cy="300px"></circle> | |
| <text id="circleWrap" class="wrap" y="225px" x="0px" font-size="12"> | |
| Here is a long text string that SVG should wrap by default, but it does not. | |
| </text> | |
| <!-- Text that D3plus will resize to fit the available space. --> | |
| <text class="type" dy="15px" x="275px">Resized</text> | |
| <rect class="shape" height="150px" width="150px" y="50px" x="200px"></rect> | |
| <text id="rectResize" class="wrap" y="50px" x="200px" font-size="12"> | |
| Here is a long text string that SVG should wrap by default, but it does not. | |
| </text> | |
| <circle class="shape" r="75px" cx="275px" cy="300px"></circle> | |
| <text id="circleResize" class="wrap" y="225px" x="200px" font-size="12"> | |
| Here is a long text string that SVG should wrap by default, but it does not. | |
| </text> | |
| <!-- For comparison, how SVG would display the text without D3plus. --> | |
| <text class="type" dy="15px" x="475px">Default Behavior</text> | |
| <rect class="shape" height="150px" width="150px" y="50px" x="400px"></rect> | |
| <text class="wrap" y="50px" x="400px" font-size="12"> | |
| Here is a long text string that SVG should wrap by default, but it does not. | |
| </text> | |
| <circle class="shape" r="75px" cx="475px" cy="300px"></circle> | |
| <text class="wrap" y="225px" x="400px" font-size="12"> | |
| Here is a long text string that SVG should wrap by default, but it does not. | |
| </text> | |
| </svg> | |
| <script> | |
| // Wrap text in a rectangle. | |
| d3plus.textwrap() | |
| .container(d3.select("#rectWrap")) | |
| .draw(); | |
| // Wrap text in a rectangle, and size the text to fit. | |
| d3plus.textwrap() | |
| .container(d3.select("#rectResize")) | |
| .resize(true) | |
| .draw(); | |
| // Wrap text in a circle. | |
| d3plus.textwrap() | |
| .container(d3.select("#circleWrap")) | |
| .draw(); | |
| // Wrap text in a circle, and size the text to fit. | |
| d3plus.textwrap() | |
| .container(d3.select("#circleResize")) | |
| .resize(true) | |
| .draw(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment