Issue with appending the element when document loads #10
Description
I was following the first example in the README to create a page with the rectangle and it didn't work. Only when I proceeded to the example related to the "Updating Elements" I saw that something get rendered.
This does not work (svg element is not getting appended with the ellipse), however I see my console log:
import render from 'd3-render';
// Initial data
const data = [
{ append: 'ellipse', fill: 'red', rx: 200, ry: 150, duration: 1000 },
];
// Initial render on <svg id="#root"></svg>
render('#root', data);
console.log('boom!')
While this works:
import render from 'd3-render';
// After 20ms, change ellipse to blue
setTimeout(() => {
// Set some updated data
const newData = [
{ append: 'ellipse', fill: 'blue', rx: 200, ry: 150, duration: 1000 },
];
// Call render again
render('#root', newData);
console.log('boom boom')
}, 20);
It could easily be that I'm missing some assumption which prevents me from seeing the result, please let me know if that's the case.
Steps to reproduce:
- Browser: chrome 87.0.4280.141
- initialized the project
npm init -y - installed dependencies
npm install d3-render d3-selection d3-transition - created
dist/index.htmlandsrc/index.js - run
npx webpack --mode=development - opened
dist/index.htmlin the browser
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
<script src="main.js"></script>
</head>
<body>
<svg id="root" width="1000" height = "1000"></svg>
</body>
</html>