A very simple template for using D3 4.x. D3-selection-multi is loaded to enable CoffeeScript's shorthand notation for setting attributes:
svg.append 'circle'
.attrs
r: 100
cx: width/2
cy: height/2
fill: 'teal'
Notice that D3 4.x uses .attrs() instead of .attr().
| svg = d3.select 'svg' | |
| width = svg.node().getBoundingClientRect().width | |
| height = svg.node().getBoundingClientRect().height | |
| svg.append 'circle' | |
| .attrs | |
| r: 100 | |
| cx: width/2 | |
| cy: height/2 | |
| fill: 'teal' | |
| svg.append 'circle' | |
| .attrs | |
| r: 60 | |
| cx: 2*width/5 | |
| cy: height/3 | |
| fill: 'orange' | |
| body, html { | |
| padding: 0; | |
| margin: 0; | |
| height: 100%; | |
| } | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| background: white; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 4.x template</title> | |
| <link type="text/css" href="index.css" rel="stylesheet"/> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script> | |
| </head> | |
| <body> | |
| <svg></svg> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
| // Generated by CoffeeScript 1.10.0 | |
| (function() { | |
| var height, svg, width; | |
| svg = d3.select('svg'); | |
| width = svg.node().getBoundingClientRect().width; | |
| height = svg.node().getBoundingClientRect().height; | |
| svg.append('circle').attrs({ | |
| r: 100, | |
| cx: width / 2, | |
| cy: height / 2, | |
| fill: 'teal' | |
| }); | |
| svg.append('circle').attrs({ | |
| r: 60, | |
| cx: 2 * width / 5, | |
| cy: height / 3, | |
| fill: 'orange' | |
| }); | |
| }).call(this); |
