Click to add new points. Hit the DELETE key to remove the selected point. Use the dropdown menu to change the interpolation mode.
Updated from mbostock's original gist to allow editing the coordinates in text fields.
Click to add new points. Hit the DELETE key to remove the selected point. Use the dropdown menu to change the interpolation mode.
Updated from mbostock's original gist to allow editing the coordinates in text fields.
This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.
Update (jimkang): Added a data accessor function as a parameter to mbostock's wrap() so that it can fetch the text from the data source rather than using text().
The problem with text() is that it is built on textContent which "returns the text content of this node and its descendants." If a text element has several tspan descendants, it joins their contents without spaces. e.g. a text element with three tspans each containing 'why', 'are', and 'we' will give back 'whyarewe' through text(). The rest of wrap will proceed to treat that as one word, naturally.
This becomes an issue when wrap() is called multiple times on text elements that have already been processed by wrap().
This demonstrates finding the closest point to the mouse by searching a quadtree. As you descend into the quadtree, you track the closest point yet found and avoid searching cells that cannot contain closer points. Importantly, you must descend preferentially into closer cells so as to restrict the search more quickly.
Patrick Surry implemented a similar solution months earlier!
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Ball drop with force-directed layout and collision detection</title> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style type="text/css"> | |
circle { | |
stroke-width: 1.5px; | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>Rendering grouped data</title> | |
<style id="jsbin-css"> | |
body { | |
font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif; | |
} |