Comments (8)
It worked for me right out of the box. I'm not using create-react-app, and I'm running this component through babel and webpack. I'd recommend you try replacing
import ForceGraph3D from '3d-force-graph';
with
const ForceGraph3D = require("3d-force-graph");
to troubleshoot if it's just a problem with the way that your webpack is handling the ES6 module transpilation.
from 3d-force-graph.
same trouble with npm import...
from 3d-force-graph.
from 3d-force-graph.
@shackbarth what version of npm are you using?
Thanks for the ES6 tip, will try that.
from 3d-force-graph.
I was not able to load using require nor import. I get the same error in both, something along the lines of "ForceGraph3D() is not a function". So this issue is still open.
However what I did was use a normal html script tag in which I loaded the javascript file like such:
<script src="3d-force-graph.js"></script>
Then right below it i execute this:
window.ForceGraph3D = ForceGraph3D;
And in my react component
<div id="3d-graph" ref="GraphDIV" className="App-3d-graph"></div>
That way i can access it from my react component:
componentDidMount(){
const Graph = window.ForceGraph3D()
(this.refs.GraphDIV);
Hope that workaround helps somebody!
Cheers!
from 3d-force-graph.
didn't succeed to use the workaround...
in my component
componentWillMount() {
// Include 3d-force-graph by script tag
const script = document.createElement('script');
script.src = 'https://unpkg.com/3d-force-graph';
script.async = false;
document.body.appendChild(script);
}
(script.async = true do not change the behavior)
Then
componentDidMount() {
const myGraph = window.ForceGraph3D()(document.getElementById('scene'));
}
I still have the error "ForceGraph3D is not a function"
strange thing is in the web console, i get:
>>window.ForceGraph3D
function kl</</</</e.default/<()
>>window.ForceGraph3D()
function t()
from 3d-force-graph.
Thanks for reporting this issue. The main reason behind this error was that the file extension for the ES modules bundle (used with import) was .mjs, and the webpack config that ships with create-react-app was misinterpreting the file type due to this extension. In the just released version 1.10.2
the file extension is renamed to .module.js, so if you upgrade you shouldn't experience the issue anymore.
Also, if you wish to integrate 3d-force-graph with React may I suggest an alternative (simpler?) way using react-kapsule. The code for something similar to your example would look like:
import React from 'react';
import ForceGraph3d from '3d-force-graph';
import fromKapsule from 'react-kapsule';
const Graph = fromKapsule(ForceGraph3d);
export default () => {
const gData = { ... };
return <Graph
graphData={gData}
cooldownTicks={300}
cooldownTime={20000}
autoColorBy="group"
forceEngine="ngraph"
/>;
};
Let me know if this fixes it for you and thanks for your patience in waiting on this issue!
from 3d-force-graph.
Thank you Mr. @vasturiano will evaluate and let you know. For now I found a way to make it work with jquery but REACT is at the top of my list!!!
Thank you very much!!!!
from 3d-force-graph.
Related Issues (20)
- LOD for abnormally large graphs
- onNodeClick work error
- Default Settings for "charge" force not clear in documentation please help!!
- Labels for 'regions' / groups.
- text-nodes example stopped working HOT 2
- When nodeThreeObject is used, three-spritetext gives an error
- Arrow bad positionning when linkCurvature(0)
- The text-links example is broken by the latest three.js release r161 HOT 1
- Progressive WebXR HOT 2
- How to show a - 1M nodes HOT 3
- Showing labels front of node HOT 8
- Best way to add dynamic external object
- How to add custom lighting in nodes
- how to zoomin or zoomout canvas with mouse click
- linkThreeObject seem to be created new obj every tick
- any ideas on how to generate a planar graph?
- change background color HOT 1
- Contribution request idea proposal - nodes traversal visualization
- non tree graph
- Crash when dragging nodes together with SpriteText
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 3d-force-graph.