color.hex() is not a function

[DDDgfx]

IM trying to use this as the documentation suggests but when I create any color.hex() is throwing an error that it is not a function.

var white = d3.color("white"); console.log(white.hex());// Uncaught TypeError: white.hex is not a function

[mbostock]

color.hex was added in d3@5.2 and d3-color@1.2, so my guess is that you’re using an old version of D3.

https://github.com/d3/d3/releases
https://github.com/d3/d3-color/releases

[DDDgfx]

Thanks so much. Sorry that was out of scope, but still its not working. Im using yarn, but yarn install did not move from 4.0 to 5.0, so I updated the version manually to 5.5 by changing package,.json...But d3-color did not update as well. So I updated d3-color manually from 1.0.1 to 1.2.0 Still the hex function is not available via d3.color.hex(). SO I imported d3-color separately, and gave it another name. Then I got the hex function from that one by writing colors2.color.hex()

This is really perplexing becuase the only version of d3-color in my node_modules folder is 1.2.0 - so how can d3 5.5 still be pointing to the legacy microlibrary.

Will this be true for all of the rest of d3's micro-libraries? I even removed d3, and added it back. no luck.

[curran]

@DDDgfx I believe that hex is a property of an instance of color, not accessible via d3.color.hex().

It would be something like const color = d3.color('green'); color.hex();

[DDDgfx]

There no trouble typing d3.color.hex() into the console and seeing the function returned, just like you can type d3.color.toString(), provided that the d3-color 1.2.0 is actually present. In practice, I am actually using it as you showed above, but getting an error that .hex() is not a function.

What Im seeing is that, even when I update to d3 5.5 via yarn, d3-color is not updated to its latest in kind - it stays at 1.0.1. So, I have had to add d3-color on its own via yarn, which adds it to package.json - where it was not before - as if it was a plug in like d3-scale-chromatic used to be.

But even after doing that, d3 is not finding the latest, which is blowing my mind since there is only one version of d3.color in my node_modules. Just to see what is going on, I have imported d3-color into my project separately, and named is d3Color, then I can use .hex from that version with no trouble. I have had to use this workflow with geo-projection and scale-chromatic in the past.

Thanks for engaging, because I can imagine its out of scope. Im just confused to how I would know which d3 microlibraries come with d3 and which one need be added on their own.

[mbostock]

Did you try yarn upgrade?

[DDDgfx]

yes. its does bring me to d3 5.5, but does not affect d3-color. Tried yarn upgrade-interactive as well, but still don't see any indication that d3-color is not up to date, though it is not. Its at 1.0.1
Tried yarn upgrade d3 --latest
and
yarn upgrade-interactive --latest

[DDDgfx]

I suppose if I get this right, I can also yarn remove d3-scale-chromatic because it comes for free inside d3 it seems

[DDDgfx]

Now Im seeing a bit better what is happening. Apologies because I am very remedial, but still wondering if this is not working the way its supposed to. When I upgraded to 5.5, i confirm it is 5.5 by looking in the dist/d3.js at the comment. I also notice that there is a node_modules folder in there that contains d3-scale-chromatic. But d3-color does not upgrade.

If I run yarn add d3-color, the d3-color at top level, as in project/node_modules, is replaced by d3-color 1.2.0. Which is great but when I try to use it in my project its not being referenced and .hex() is not available.

Looking back in side project/node_modules/d3/node_modules there is now a second copy of d3-color and its the legacy version 1.0.1. Why it got moved there IDK.

[DDDgfx]

Maybe if I just delete the d3-color from d3/node_modules it will go look a level up?

[DDDgfx]

tried deleting my node module folder altogether clearing yarn cache and re-running yarn install with package json listing "^5.5.0" for d3. Still brings back color 1.0.3

[n8agrin]

@DDDgfx check your package-lock.json or yarn.lock files for multiple versions of d3-color. This would indicate you have dependencies which depend on different versions of d3-color. npm or yarn will happily download all the versions of d3-color your configuration asks for. This may be why you're always ending up with a 1.0 version of d3-color.