vasturiano / d3-force-3d Goto Github PK

Hello, may I ask if there are any major obstacles that prevents this library switching to use web workers? Our current project uses react force graph, and there are performance issues when number of nodes is large and the calculating layout is expensive. Therefore, before I implement, may I ask if there are any issues of using it from the author's perspective?

Can I set up clustering behavior for some nodes with help forceRadial for different positions?
I see I can set x,y,z as value, not a callback for each node.
If I can't, could you give me the best solutions to see some group of nodes around a group of x,y,z positions?

Hi, when I try to do simple simulation with 3 dimension I get z as NaN:

d3Force3d.forceSimulation(data).numDimensions(3)

Do I need to do something special to get z defined?

Is there any as simple as possible example with 3d simulation?

Hi, I'm looking to have a 3D graph automatically rotate as well as prevent user interaction. Is this possible, and if so, how?

....Sorry, I'm looking in the wrong place, will refer to https://github.com/vasturiano/3d-force-graph

One of your developers implemented a les mis version with a person-selector to feature just the person-relationships.
The issue where I found the example is closed.
The example uses two size values (11 for the number of groups and 55 - which we do not understand)
It also uses type: person which may be part of the technique to set the person-selector.
Can you point me to the issue that featured the customized version?
I would like to ask the developer an implementation question.

I like the way how in 3d-force-graph you can retrieve and update node and link data during active simulation like this:

let { nodes, links } = this.Graph.graphData();

// do some changes 
...

// and then set new data on the fly

this.Graph.graphData({
	nodes: this.graphNodesModel,
	links: this.graphLinksModel
});

I could not yet figure out how exactly I would do this with d3-force-3d. I tried something like this:

var Simulation = d3Force.forceSimulation(initData.nodes)
	.numDimensions(3)
	.force("charge", d3Force.forceManyBody())
	.force("link", d3Force.forceLink(initData.links))
	.force("center", d3Force.forceCenter());

let nodes = Simulation.nodes();
let links = Simulation.force("link").links();

// make some changes on node and link data

// update current simulation
Simulation.stop();
Simulation.nodes( nodes );
Simulation.force("link").links( links );
Simulation.restart();

This throws some error message saying that my nodeId is missing (I'm using string keys as node IDs).

My Data looks like this:

var nodes = [ { id: 'EJZPPS' }, { id: 'UQEZUR' }, ... ];		
var links = [ { source: 'UQEZUR', target: 'EJZPPS' }, { source: 'UQEZUR', target: 'IBL9MB' }, ...	];

Hi,

I use d3-force-3d to do 3 dimensions graph visualization, when I drag a node, all the nodes linked with it will crowded together, is it because the parameters at accumulate are not correct? since it used d3-octree, it's tree node have 8 children, when I change 4 to 8 in for loop ,this problem seems fixed.

BTW, your repositories are so awesome! get lots of inspiration from it.

  function accumulate(treeNode) {
    var strength = 0, q, c, weight = 0, x, y, z, i;

    // For internal nodes, accumulate forces from children.
    if (treeNode.length) {
      for (x = y = z = i = 0; i < 4; ++i) {
        if ((q = treeNode[i]) && (c = Math.abs(q.value))) {
          strength += q.value, weight += c, x += c * (q.x || 0), y += c * (q.y || 0), z += c * (q.z || 0);
        }
      }
      treeNode.x = x / weight;
      if (nDim > 1) { treeNode.y = y / weight; }
      if (nDim > 2) { treeNode.z = z / weight; }
    }

    // For leaf nodes, accumulate forces from coincident nodes.
    else {
      q = treeNode;
      q.x = q.data.x;
      if (nDim > 1) { q.y = q.data.y; }
      if (nDim > 2) { q.z = q.data.z; }
      do strength += strengths[q.data.index];
      while (q = q.next);
    }

    treeNode.value = strength;
  } 

is this line un correct when on 3 dimensions?

      for (x = y = z = i = 0; i < 4; ++i) 

I want to set links strength to 0, yet to have min distance to them, is that possible?

This repository is great for me, and Can I use this without 3d-force-graph. Thx.

Can I drag & move like 3d-force-graph

from a newcomer of d3 :)

At the moment, d3-force-3d is shipping ES6 syntax as per here.

Because d3-force-3d isn't transpiled, this is breaking IE11 and other older browsers.
The arrow function crashes build on IE 11.
Changed arrow function to regular function or update rollup configs ?

Very Nice addition for 3d-force simulation, I wanted to know how we can add custom Toottip at the links as well as nodes

1. The prepare script does not run on windows.

2. After yarn install I run rollup -c which complains:

import meta from './package.json' assert { type: 'json' };

What does the assert mean ? After removing it the bundles were built.

Would it be possible to run the engine on GPU using gpu.js or webgpu to improve the expansion of the nodes? Is it feasible?

I don't suppose anyone has TypeScript definitions for this package yet, do they?

Hi there,
Is there any way we could override the drag start event?

I want to stop all nodes from floating while user is dragging one of the nodes.
One of the solutions i found is to remove the drag start event, Is it possible to do it with react force graph?

Any help would be appreciated, many thanks!

Greetings!

I was wondering if there is any way to export the rendered layout coordinates?

I have an application where I would like to generate a layout, save the coordinates, and then restore the layout coordinates in the future (possibly with some additional "new" nodes added around the previously generated network).

It looks like one can restore & fix node coordinates using simulation.nodes, which is really useful.

Is there any way to capture the layout though? i.e. is there any "getter" for the current node positions?

If not, I imagine I could probably compute the layout externally and simply provide the initial coordinates that way, but if there is a way to export the coordinates, or if it would not be too hard to add such a method, that would be really useful.

Thanks for all of your great work on this and 3d-force-graph! These are both incredibly useful and elegant libraries. I appreciate you taking the time to create and share them with the community.

Cheers,
Keith

I am getting an error when compiling:

static/js/main.f65c36cd.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/d3-force-3d/dist/d3-force-3d.js:245,0]

npm ERR! Linux 4.15.0-70-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script 'react-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ui
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

I was exploring the simulation.tick function and found that it used no concept of delta-time while applying physics. I was curious about how d3-force-3d tackles this. I also explored the d3-timer which is the internal timer used by the library. Can anyone explain to me how d3-timer helps get around this? If I understand it correctly, d3-timer runs a timer that matches the frame rate. If my browser runs on 60fps, the tick function inside d3-timer gets called 60 times every second. If the frame rate changes, calls to the tick function will change, affecting the speed of the simulation accordingly. I don't seem to understand how this is prevented. Can any please help me with this?

Hi,

just been exploring some of the 3d Algorithms we use to calculate x,y, z of points for a 3d force graph. However the best approach i have seen is to use a python library. Can i ask how you calculate positions? Do you do custom intense calculations? or is it just a library which i missed out on?

Thanks heaps

Sorry, for this probably stupid question, but you write that d3-force-3d can be used as a drop-in to replace d3-force. How would I go about using require to drop in d3-force-3d into the following code:

require.config({ paths: 
    { d3: "https://d3js.org/d3.v5.min" } });

require(["d3"], function (d3) {

...

    var simulation = d3.forceSimulation(graph.nodes)
        .force("link", d3.forceLink(graph.links).distance(20).strength(.6))
        .force("charge", d3.forceManyBody().strength(-400))
        .force('centerX', d3.forceX(width / 2))
        .force('centerY', d3.forceY(height / 2))
        .on("tick", ticked);
...
});

Having just forked the repo and copied the Miserable example from bl.ocks.org/vasturiano

I run a local file server using serve and have everything configured as it should. I even encapsulated the index.js code in a drawGraph function:

function drawGraph() {
  const Graph = ForceGraph3D()
    (document.getElementById("3d-graph"));

  // ...
}

So I could use a callback  `document.addEventListener("DOMContentLoaded", cb)` to make sure that the DOM and all script dependencies are loaded before attempting to draw the graph.

```html
  <script src="index.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function (event) {
      console.log("DOM fully loaded and parsed");
      drawGraph();
    });
  </script>

However, when searching for ForceGraph3D in the entire project, I find no match. What am I missing? I presume the example on your blog is out of date?

Please advice. Thanks.

Can't make nodes to stick at defined fixed x y z position.

I tried fixed:true on nodes but it does not work..
disabling forces via d3force does not set up graph properly.

any ideas?