GithubHelp home page GithubHelp logo

color.hex() is not a function about d3-color HOT 11 CLOSED

d3 avatar d3 commented on April 19, 2024
color.hex() is not a function

from d3-color.

Comments (11)

mbostock avatar mbostock commented on April 19, 2024

color.hex was added in [email protected] and [email protected], 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

from d3-color.

DDDgfx avatar DDDgfx commented on April 19, 2024

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.

from d3-color.

curran avatar curran commented on April 19, 2024

@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();

from d3-color.

DDDgfx avatar DDDgfx commented on April 19, 2024

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.

from d3-color.

mbostock avatar mbostock commented on April 19, 2024

Did you try yarn upgrade?

from d3-color.

DDDgfx avatar DDDgfx commented on April 19, 2024

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

from d3-color.

DDDgfx avatar DDDgfx commented on April 19, 2024

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

from d3-color.

DDDgfx avatar DDDgfx commented on April 19, 2024

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.

from d3-color.

DDDgfx avatar DDDgfx commented on April 19, 2024

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

from d3-color.

DDDgfx avatar DDDgfx commented on April 19, 2024

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

from d3-color.

n8agrin avatar n8agrin commented on April 19, 2024

@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.

from d3-color.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.