Last active
December 23, 2016 13:22
-
-
Save quantbo/45b98a10e42aa6656d0aa3aaaaf1a971 to your computer and use it in GitHub Desktop.
D3: In 'enter' sequence 'selectAll' accepts any non-empty string.
This file contains 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
| <!-- | |
| Adapted from Thinking with Joins: | |
| https://bost.ocks.org/mike/join/ | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| circle { | |
| fill-opacity: 0.5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg height='200px', width='400px'></svg> | |
| </body> | |
| <script> | |
| 'use strict'; | |
| const myData = [ | |
| {x: 100, y: 100, r: 100}, | |
| {x: 200, y: 100, r: 100}, | |
| {x: 300, y: 100, r: 100} | |
| ]; | |
| let svg = d3.select('svg'); | |
| //A curious property of D3 is that in the sequence below | |
| //any non-empty string will serve within the selectAll method. | |
| svg.selectAll('i think therefore i am') | |
| .data(myData) | |
| .enter().append('circle') | |
| .attr('cx', (d) => {return d.x;}) | |
| .attr('cy', (d) => {return d.y;}) | |
| .attr('r', (d) => {return d.r;}); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A curious property of D3 is that in an
entersequence theselectAllmethod will accept any non-empty string. This is illustrated in the accompanying code. This suggests that a separate method, with an empty signature, might be appropriate for use in anentersequence. Alternatively, and perhaps more parsimoniously, it might be possible to eliminate theselectAll.