d3.create Is Not A Function

d3.create Is Not A Function

d3.create is not a function error

Have you gotten the "Uncaught TypeError: d3.create(...) is not a function" error?

d3.create is not a function error image

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:

var mySVG = d3.create("svg");

You don't see anything added to the webpage HTML:

d3.create example creating an svg element

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 creates a d3 selection

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:

d3.create creates a JavaScript object

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:

function d3Rocks() { return "D3.js Rocks!" }

This gives us:

Create a named JavaScript function

If we then look at the function in the JavaScript console:


We get:

JavaScript Function signature

When we run / instantiate the function by adding an open and close parentheses:


The function runs and we get no errors:

JavaScript function runs

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:

d3.create is not  function error example

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.