-Change the rectangle's color to red
-Change the width and height of the rect to 75 and 150
This example uses D3 version 4.1.1
Most examples on the web as of July 11, 2016 are written with D3 version 3.x
Most changes to the API are syntactial. The underlying principles remain the same.
See Changes in D3 4.0 for details
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script> | |
| <style> | |
| body { | |
| margin:0; | |
| background-size: 8px 8px; | |
| background-image: linear-gradient(to right, #eee 1px, transparent 1px), linear-gradient(to bottom, #eee 1px, transparent 1px); | |
| position:fixed; | |
| top:0; | |
| right:0; | |
| bottom:0; | |
| left:0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var svg = d3.select("body").append("svg"); | |
| svg | |
| .attr('width', 300) | |
| .attr('height', 300) | |
| svg | |
| .append("rect") | |
| .attr('width', 100) | |
| .attr('height', 100) | |
| .attr('x', 50) | |
| .attr('y', 50) | |
| .style('fill', '#a72d1a'); | |
| </script> | |
| </body> |
