React JS

[Koribeche]

Hi @ofrohn, thanks you so much for this, i just wanted to ask you how could i use this within ReactJs i've tried evrything,

• npm d3-celestial and importing it.
• adding the files to my project and importing them...etc but no matter what i did there were always a problem, i'm a begginer in reactJS and i'm really sorry if i'm wasting your time, but i would really appreciate it if you could help me out.

[LoneOne123]

Hi, Have a look into the react doc, there is a tutorial how to import and use libraries (here they use a jquery plugin), this works fine with the d3 celestial code. https://reactjs.org/docs/integrating-with-other-libraries.html In orther words wrap it in its own Component ;)

[Koribeche]

here's my actual code: import React from "react"; import celestial from "d3-celestial"; var map = function () { var test; var config = { width: 300, location: true, projection: "airy", center: [45.3, 3.31, 0], interactive: false, controls: false, zoomlevel: 1, form: false, lines: { graticule: { show: false }, equatorial: { show: false }, ecliptic: { show: false }, }, constellations: { names: false, lineStyle: { stroke: "#cccccc", width: 1, opacity: 0.5 }, }, background: { fill: "#000", stroke: "#000", opacity: 1, width: 1 }, datapath: "https://ofrohn.github.io/data/", stars: { colors: false, names: false, style: { fill: "#ffffff", opacity: 0.7 }, limit: 6, size: 4, }, dsos: { show: false }, mw: { show: true, }, }; return (

{((test = celestial.Celestial()), test.display(config))}

); }; and i get this error, i have no idea how to fix it.

[LoneOne123]

Why don't u read the tutorial in the link i posted u just have to follow it... i won't post just the code. Another thing is read the error and understand it, it says the id is null so maybe 1 mistake you do is not setting the id of the container in the config .... In the readme the first point under usage ... --> On your HTML add a div with some id, e.g.: <div id="celestial-map"></div> and in the config example the this line will take the id of the container ... container: "map", ...

[Koribeche]

oh sorry i forgot to comment out that i read the link and it worked, thank you a lot. i have one last question if you could help me, @ofrohn published this solution to download the png version but i need the svg version , i read the celestial.js file and i found the exportSVG() function i understood what's happening in there but when i try to use it nothing happens, and if i try to consol.log(Celestial.exportSVG()) i found it undefined. do you have any idea how i can get the svg version on a variable like the dataURL on the picture above ? And thank you again for your help

[LoneOne123]

Good, and now look what's the difference between this function(exportsvg) definition and a definition of a function u can call, and then edit it so u can call export svg too and ;)

[Koribeche]

i understood that i need to fill the definition below Celestial.exportSVG = function () {

}; but to be honest, i have no idea how. I didn't want to bother you again so i tried lots of stuff but nothing worked so if you could help me that would be great

[Koribeche]

@LoneOne123 any news ?

[ofrohn]

Sorry for the late answer, I've been quite busy the last few weeks. Glad you figured out most of the problem on your own. The problem with Celestial.exportSVG is that it's just a stub, I haven't got around to implement it yet. I'll fix that ASAP.

[ofrohn]

The latest version (0.7.29) has the function implemented. Because the formatting works asynchronous, the function also needs to be. With

Celestial.exportSVG(function(svg) {
  console.log(svg); // or whatever
})

you should see the desired results as completely formatted svg data with the currently selected styling. You can also do it with arrow-notation, I don't do that because ~~I'm old~~ the app predates that fancy new stuff and I want to keep it consistent.

[Koribeche]

@ofrohn thank you a lot for taking time to do that. I have to say, a month ago i was trying stuff out with d3-celestial , i realized that when i set " formFields: { download: true } " and i click the button Download SVG using React, an error will appear saying that d3.queue is not a function and i didn't care much at the time, but now when i use the new exportSVG function the same error appears.

i tried at the time outside of React ( using a simple html page ) the Download SVG button worked just fine, so when i saw that error today, i tried the new version on the that same html page and i got a different error saying " Celestial.metrics is not a function" i don't really know how to solve it ( especially the React version the html version was just for testing ) so if you could check that out please. And thank you again for you time.

[Koribeche]

@ofrohn any news about that ?

[ofrohn]

Sorry, I'm still under massive time constraints, and it'll be some effort to acquaint myself with react. The above error appears when you run celestial under react.js, yes? Does the code in your second comment reproduce the error.

[Koribeche]

@ofrohn evrything is working just fine for all celestial functions, but when i try to use the new SVG export function i get the same errors as on my last comment

[ofrohn]

That took some time, but it was a module not correctly included under react and other libraries. In the end I simply declared it statically, that should work now.

[shozibabbas]

@Koribeche can you provide your solution here? I am trying to integrate d3-celestial in react and I've been having some issues.

[Koribeche]

@shozibabbas sorry for the late answer, here's the code:

import React, { Component } from "react"; import celestial from "d3-celestial";

class Map extends Component { componentDidMount() { var config = { // your config }; var test = celestial.Celestial(); test.display(config); } render() { return ( div id="celestial-map"></div ); } } export default Map;