vasturiano / d3-force-cluster-3d

A clustering force type for the d3-force-3d simulation engine
MIT License
12 stars 3 forks source link

How to use this one? #2

Open Lora336 opened 3 years ago

Lora336 commented 3 years ago

hello @vasturiano

I try this npm. and show this....."Graph.forceSimulation is not a function" image

why this happend? I thought put it all to necessary, like lib and function.

this is my example. https://codepen.io/LolaKane/pen/bGqKPME?editors=1000

please help me thank you😐

vasturiano commented 3 years ago

@Lora336 you don't need to invoke .forceSimulation() since you're using 3d-force-graph. That's not a method of that module.

You can just attach the force plugin via .d3Force(<name>, d3.forceCluster()...)

Lora336 commented 3 years ago

@Lora336 you don't need to invoke .forceSimulation() since you're using 3d-force-graph. That's not a method of that module.

You can just attach the force plugin via .d3Force(<name>, d3.forceCluster()...)

hi again ! and thank you for reply.

I try it again. I have two Q.

1) Shouldn't lines exist in clustering? 2) how to input nodes data? (TypeError: myGraph.nodes is not a function)

this is my script

  import ForceGraph3D from '3d-force-graph';
  import d3ForceCluster from 'd3-force-cluster-3d';

    var nodes = gData.nodes.map(function () {
      var i = Math.floor(Math.random() * m),
          r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
          d = {
            cluster: i,
            radius: r,
            x: Math.cos(i / m * 2 * Math.PI) * 200 + width / 2 + Math.random(),
            y: Math.sin(i / m * 2 * Math.PI) * 200 + height / 2 + Math.random()
          };
      if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
      return d;
    });

    let myGraph = ForceGraph3D()
      (document.getElementById('root'))
        .nodes(nodes)          //TypeError: Object(...)(...)(...).nodes is not a function
        .d3Force('cluster', d3ForceCluster()
        .centers(node => clusters[node.cluster])
        .strength(0.5)
        .centerInertia(0.1));

https://codepen.io/lora336/pen/mdWGRWG?editors=1000 thanks a lot ! :)

vasturiano commented 3 years ago

@Lora336 your questions about how to input data are related to the 3d-force-graph module. You should look in the readme of that module, but basically you use the .graphData({ nodes, links }) to input data into your graph.