d3.create is not a function error
Have you gotten the "Uncaught TypeError: d3.create(...) is not a function" error?
D3 Create Element
You can use d3.create to create a new element with the name you give to it.
What this means is that D3.create creates in D3 v6 a single-element selection that is not attached to the HTML web page.
So if you write the following JavaScript code in the Chrome Developer Tools JavaScript Console:
You don't see anything added to the webpage HTML:
You can see the html tag, head tag, script tag, body tag, and all of the closing tags, but not an SVG html tag.
This is what it means that it is not attached - that the SVG element was created into a D3.js selection, but it was not attached to the webpage.
If we then look at the variable in the JS console:
We can see that it looks like a D3 selection that contains one element - the "svg" that we asked it to create in the d3.create function
d3.create is not a function
D3 selections is are not functions, they are objects.
We can check that by looking at the __proto__ property of the d3 selection named mySVG:
This tells us that what what d3.create creates is an object - which we know is a D3 selection object.
Create a named JavaScript Function
Let's create a simple named JavaScript function:
This gives us:
If we then look at the function in the JavaScript console:
We get:
When we run / instantiate the function by adding an open and close parentheses:
The function runs and we get no errors:
Using d3.create as a function
Now, let's try to use d3.create as a function.
Rather than using the mySVG variable, let's just use the d3.create("svg") and add an open and closing parentheses to the end:
We get the "d3.create is not a function" error:
Bingo - we can reproduce the d3.create is not a function error.
Because a D3 selection object is a JavaScript object, not a JavaScript function.