I'm using d3 (version 7.0.0) to draw some graphs in a browser with HTML and React.js. I am following the instructions, but I keep getting the error TypeError: d3.scaleLinear is not a function. When I replace scaleLinear with scale.linear it does work, but then it returns the error TypeError: d3.axisBottom is not a function.

This is the block of code where the error points to:

var x = d3.scaleLinear().domain([0,t]).nice().range([margin.left,width-margin.right])
var xAxis = d3.axisBottom(x)
var y = d3.scaleLinear().domain([-1,1]).nice().range([height-margin.top,margin.bottom])
var yAxis = d3.axisLeft(y)
svg.append("g")
    .attr("transform",`translate(0,${height/2})`)
    .call(xAxis)
    .call(g=>g.select(".domain").remove())
    .call(g=>g.selectAll(".tick line").clone()
    .attr("y2",-height)
    .attr("stroke-opacity",0.1))
svg.append("g")
    .attr("transform",`translate(${margin.left},0)`)
    .call(yAxis)
    .call(g=>g.select(".domain").remove())
    .call(g=>g.select(".tick line").clone()
    .attr("x2",width)
    .attr("stroke-opacity","0.1"))

Both errors are absurd, because d3 7.0.0 works explicitly with the indicated functions, yet it keeps telling me that neither scaleLinear nor axisBottom are functions. Can anyone tell me what's wrong with this?

EDIT: I have managed to fix it by importing the ponents directly from their modules (the last line is how I imported d3):

import { scaleLinear } from 'd3-scale'
import { axisBottom,axisLeft } from 'd3-axis'
import { line } from 'd3-shape'
var d3 = require("d3")

I am, however, unable to create the graph with the axes, as it returns the error

TypeError: path.merge is not a function
    at Array.axis (axis.js:59)
    at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.call (d3.js:975)
    at InstantAnTr.js:219

where the latter line points to the function that appends the xAxis, as shown in the above code. If I don't call those the graph does appear.

EDIT 2: I tried to replace the import element shown above with import * as d3 from "d3", but it caused the error TypeError: d3__WEBPACK_IMPORTED_MODULE_7__.scaleLinear is not a function.

I'm using d3 (version 7.0.0) to draw some graphs in a browser with HTML and React.js. I am following the instructions, but I keep getting the error TypeError: d3.scaleLinear is not a function. When I replace scaleLinear with scale.linear it does work, but then it returns the error TypeError: d3.axisBottom is not a function.

This is the block of code where the error points to:

var x = d3.scaleLinear().domain([0,t]).nice().range([margin.left,width-margin.right])
var xAxis = d3.axisBottom(x)
var y = d3.scaleLinear().domain([-1,1]).nice().range([height-margin.top,margin.bottom])
var yAxis = d3.axisLeft(y)
svg.append("g")
    .attr("transform",`translate(0,${height/2})`)
    .call(xAxis)
    .call(g=>g.select(".domain").remove())
    .call(g=>g.selectAll(".tick line").clone()
    .attr("y2",-height)
    .attr("stroke-opacity",0.1))
svg.append("g")
    .attr("transform",`translate(${margin.left},0)`)
    .call(yAxis)
    .call(g=>g.select(".domain").remove())
    .call(g=>g.select(".tick line").clone()
    .attr("x2",width)
    .attr("stroke-opacity","0.1"))

Both errors are absurd, because d3 7.0.0 works explicitly with the indicated functions, yet it keeps telling me that neither scaleLinear nor axisBottom are functions. Can anyone tell me what's wrong with this?

EDIT: I have managed to fix it by importing the ponents directly from their modules (the last line is how I imported d3):

import { scaleLinear } from 'd3-scale'
import { axisBottom,axisLeft } from 'd3-axis'
import { line } from 'd3-shape'
var d3 = require("d3")

I am, however, unable to create the graph with the axes, as it returns the error

TypeError: path.merge is not a function
    at Array.axis (axis.js:59)
    at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.call (d3.js:975)
    at InstantAnTr.js:219

where the latter line points to the function that appends the xAxis, as shown in the above code. If I don't call those the graph does appear.

EDIT 2: I tried to replace the import element shown above with import * as d3 from "d3", but it caused the error TypeError: d3__WEBPACK_IMPORTED_MODULE_7__.scaleLinear is not a function.

• javascript
• html
• d3.js

• 3 it looks like you have not imported d3 properly. Just have a differnt d3 function call like var abc = d3.range(10); when it throws an error then d3 is not imported correctly – ee2Dev Commented Jun 21, 2021 at 20:46
• 3 can you add how you imported d3? With d3 v4 and higher d3.scale.linear became d3.scaleLinear and d3.axisBottom – ee2Dev Commented Jun 21, 2021 at 20:50

2 Answers 2

Just tested scaleLinear and axisBottom with D3 V7. Everything works as expected, so the problem should be somewhere else: improper import, conflicting version, or error in loading the library.

const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 250]);
  
const xAxis = d3.axisBottom(xScale);

d3.select('svg')
  .append('g')
  .attr('transform', 'translate(20,20)')
  .call(xAxis);

<script src="https://cdnjs.cloudflare./ajax/libs/d3/7.0.0/d3.min.js"></script>

<svg />

It's possible your using code from a different version of d3. Try using <script src="https://d3js/d3.v4.min.js"></script>

in the header section at the top of your file.