d3 / d3-axis

Human-readable reference marks for scales.

Home Page:https://d3js.org/d3-axis

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Uncaught TypeError: setting getter-only property "top" when calling axis function

Nate-Wessel opened this issue · comments

Using the latest release (1.0.12), I was unable to produce axes, always getting the error Uncaught TypeError: setting getter-only property "top" when calling an axis function, e.g.

const years = [2019,2018,2017,2016,2015]
const margin = {top: 0, right: 60, bottom: 40, left: 0}
const Y = scaleLinear() // time axis
	.domain([Math.min(...years),Math.max(...years)])
	.range([0,height-margin.bottom])
svg.append('g')
	.attr('transform',`translate(${width-margin.right},0)`)
	.call(axisRight(Y)) // <-- it always failed right here

Reverting the package to 1.0.0 solved the problem with no change to my code.

I don't know how to use observable, but I will offer the following in case it helps:

  • I am using Firefox 79 (Same error in Chrome though)
  • I am getting this package via NPM and bundling everything with Rollup
  • I tried working backwords from the current version (1.0.12), building with each patch version until I got something that worked. 1.0.2 worked for me, indicating that the problem (whatever it may be) was introduced in 1.0.3.
  • My other dependencies are:
  "dependencies": {
    "accessible-autocomplete": "^2.0.3",
    "d3-axis": "1.0.2",
    "d3-fetch": "^1.2.0",
    "d3-scale": "^3.2.1",
    "d3-scale-chromatic": "^1.5.0",
    "d3-selection": "^1.4.2",
    "d3-shape": "^1.3.7",
    "d3-time": "^1.1.0",
    "d3-time-format": "^2.2.3",
    "d3-transition": "^1.3.2"
  }

The only change in 1.0.3 was adding a module entry to the package.json, which suggests that this is a bundler misconfiguration in your project.

v1.0.2...v1.0.3

Aha.
I don't quite understand the difference yet, but I switched to bundling into UMD format from CommonJS. The latest version now works for me without error. I had been using the same bundler settings on other projects for a while now without error, so I assumed the problem was with this package. Sorry for the bother if the problem was just on my end. Looks like I have some reading to do on JS module formats!
Thanks!

I had the same issue - maybe commonJS does not use proper namespaces and this causes a collision with whatever package was added in the package.json? Anyway, UMD fixed it for me too