d3-render Issue with appending the element when document loads

Issue with appending the element when document loads

Open vrann opened this issue 4 years ago • 0 comments

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.html and src/index.js
run npx webpack --mode=development
opened dist/index.html in 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>

Jan 12 '21 12:01 vrann

d3-render d3-render copied to clipboard

Issue with appending the element when document loads

d3-render
d3-render copied to clipboard