How to use the d3-force.forceSimulation function in d3-force

To help you get started, we’ve selected a few d3-force examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / types / d3-force / d3-force-tests.ts View on Github external
// Create Force Simulation =============================================================

let nodeSimulation: d3Force.Simulation;
let nodeLinkSimulation: d3Force.Simulation;

// Force Simulation without Links / No node data
nodeSimulation = d3Force.forceSimulation();

// Force Simulation without Links / With node data
nodeSimulation = d3Force.forceSimulation(graph.nodes);

// Force Simulation with Links / No node data
nodeLinkSimulation = d3Force.forceSimulation();

// Force Simulation with Links / With node data
nodeLinkSimulation = d3Force.forceSimulation(graph.nodes);

// nodes() -----------------------------------------------------------------------------

nodeSimulation = nodeSimulation.nodes(graph.nodes);

simNodes = nodeSimulation.nodes();

// alpha() -----------------------------------------------------------------------------

nodeLinkSimulation = nodeLinkSimulation.alpha(0.3);
num = nodeLinkSimulation.alpha();

// alphaMin() -----------------------------------------------------------------------------

nodeLinkSimulation = nodeLinkSimulation.alphaMin(0.0001);
num = nodeLinkSimulation.alphaMin();
github DefinitelyTyped / DefinitelyTyped / types / d3-force / d3-force-tests.ts View on Github external
// Use ForceRadial force -----------------------------------------------------------------

forceRadial.initialize(graph.nodes);
forceRadial(0.1); // alpha

// -------------------------------------------------------------------------------------
// Test Force Simulation
// -------------------------------------------------------------------------------------

// Create Force Simulation =============================================================

let nodeSimulation: d3Force.Simulation;
let nodeLinkSimulation: d3Force.Simulation;

// Force Simulation without Links / No node data
nodeSimulation = d3Force.forceSimulation();

// Force Simulation without Links / With node data
nodeSimulation = d3Force.forceSimulation(graph.nodes);

// Force Simulation with Links / No node data
nodeLinkSimulation = d3Force.forceSimulation();

// Force Simulation with Links / With node data
nodeLinkSimulation = d3Force.forceSimulation(graph.nodes);

// nodes() -----------------------------------------------------------------------------

nodeSimulation = nodeSimulation.nodes(graph.nodes);

simNodes = nodeSimulation.nodes();
github Kitware / paraviewweb / src / InfoViz / Native / HyperbolicEdgeBundles / index.js View on Github external
const rootNode = model.treeEdges[0].source;
    // console.log('hierarchy ', d3.layout.hierarchy()(rootNode), rootNode);
    const maxDepth = model.nodes.reduce((depth, entry) => (entry.depth > depth ? entry.depth : depth), 1);
    const tidyTree = d3.layout.tree()
      .separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth)
      .size([360, maxDepth * 10]);
    tidyTree(rootNode); // Assign x, y coordinates to each node.
    model.nodes.forEach((nn, ii) => {
      const tx = nn.x;
      const ty = nn.y;
      model.nodes[ii].x = ty * Math.cos(tx * Math.PI / 180.0);
      model.nodes[ii].y = ty * Math.sin(tx * Math.PI / 180.0);
    });

    // Relax the sparse tidy tree with force-directed layout:
    model.sim = forceSimulation(model.nodes)
      .force('charge', forceManyBody())
      .force('link', forceLink(model.treeEdges).distance(10).strength(1))
      .force('x', forceX())
      .force('y', forceY());

    // Give the tree a few iterations to relax before
    // we grab its bounding box for a default scale:
    for (let iter = 0; iter < 20; ++iter) {
      model.sim.tick();
    }
    model.sim.on('tick', () => publicAPI.coordsChanged(0));
    model.sim.restart();

    // Compute bounds and scaling
    model.hyperbolicBounds =
      model.nodes.reduce((result, value) => [
github plotly / plotly.js / src / traces / sankey / render.js View on Github external
function attachForce(sankeyNode, forceKey, d, gd) {
    // Attach force to nodes in the same column (same x coordinate)
    switchToForceFormat(d.graph.nodes);
    var nodes = d.graph.nodes
        .filter(function(n) {return n.originalX === d.node.originalX;})
        // Filter out children
        .filter(function(n) {return !n.partOfGroup;});
    d.forceLayouts[forceKey] = d3Force.forceSimulation(nodes)
        .alphaDecay(0)
        .force('collide', d3Force.forceCollide()
            .radius(function(n) {return n.dy / 2 + d.nodePad / 2;})
            .strength(1)
            .iterations(c.forceIterations))
        .force('constrain', snappingForce(sankeyNode, forceKey, nodes, d, gd))
        .stop();
}
github samccone / bundle-buddy / viz / src / App.js View on Github external
const filterNetwork = (name, nodes, links) => {
  if (!name) {
    return { nodes, links };
  }

  if (!links[0].target.id) {
    const simulation = forceSimulation().force(
      "link",
      forceLink().id(d => d.id)
    );
    simulation.nodes(nodes);
    simulation.force("link").links(links);
  }

  const children = [];
  const childrenLinks = links.filter(d => {
    const match =
      d.target.id === name &&
      d.source.inBundleFiles &&
      d.source.inBundleFiles.length > 1;

    if (match) {
      children.push(d.source.id);
github amcharts / amcharts4 / dist / es2015 / .internal / plugins / forceDirected / ForceDirectedSeries.js View on Github external
function ForceDirectedSeries() {
        var _this = _super.call(this) || this;
        _this.className = "ForceDirectedSeries";
        _this.d3forceSimulation = d3force.forceSimulation();
        _this.maxRadius = percent(8);
        _this.minRadius = percent(1);
        _this.width = percent(100);
        _this.height = percent(100);
        _this.colors = new ColorSet();
        _this.colors.step = 2;
        _this.width = percent(100);
        _this.height = percent(100);
        _this.manyBodyStrength = -15;
        _this.centerStrength = 0.8;
        _this.events.on("maxsizechanged", function () {
            _this.updateRadiuses(_this.dataItems);
            _this.updateLinksAndNodes();
            _this.dataItems.each(function (dataItem) {
                _this.handleFixed(dataItem);
            });
github ashmind / SharpLab / source / WebApp / components / internal / app-output-view-graph.ts View on Github external
const source = d3NodesById[r.from];
                const target = d3NodesById[r.to];
                const topLevelSource = !source.data.nested ? source as ExtendedNodeDatum : source.data.nested.parent;
                const topLevelTarget = !target.data.nested ? target as ExtendedNodeDatum : target.data.nested.parent;
                topLevelSource.data.topLevelLinked.push(topLevelTarget);
                topLevelTarget.data.topLevelLinked.push(topLevelSource);
                return {
                    data: {
                        svgLink: svgLinksByKey[r.from + '-' + r.to]
                    },
                    source,
                    target
                };
            });

            (d3.forceSimulation(d3Nodes)
              .force('link',
                  d3.forceLink>()
                    .links(d3Links)
                    .strength(l => (l.source as ExtendedNodeDatum).data.node.isStack ? 5 : 2)
              )
              .force('heap-boundary', forceRepealBoundary(n => this.getNodeRect(n), heapBoundary))
              .force('intersections', forceRepealNodeIntersections(n => this.getNodeRect(n, { margin: nodeLayoutMargin })))
              .force('nested', forceBindNested())
              .tick(400) as unknown as d3.Simulation)
              .stop();

            for (const node of d3Nodes) {
                const { element, isDomLayout, width, height } = node.data;
                if (isDomLayout)
                    continue;
github two-n / cirque / src / avoidOverlap.js View on Github external
export default (circles, margin = 0) => {
  circles.forEach(d => { d.x0 = d.x; d.y0 = d.y })
  const force = forceSimulation(circles).stop()
    .force('x', forceX(d => d.x0))
    .force('y', forceY(d => d.y0))
    .force('collide', forceCollide(d => d.r + margin))
  for (let i = 0; i < 100; ++i) force.tick()
  circles.forEach(d => { delete d.x0; delete d.y0 })
  return circles
}
github wso2 / cellery-security / system / control-plane / global / components / observability / org.wso2.vick.observability.ui / src / pages / overview / components / dependency-graph / graph / graph.helper.js View on Github external
function _createForceSimulation(width, height, gravity) {
    const frx = d3ForceX(width / 2).strength(CONST.FORCE_X);
    const fry = d3ForceY(height / 2).strength(CONST.FORCE_Y);
    const forceStrength = gravity;

    return d3ForceSimulation()
        .force("charge", d3ForceManyBody().strength(forceStrength))
        .force("x", frx)
        .force("y", fry);
}
github vega / vega-dataflow / src / layout / Force.js View on Github external
function simulation(nodes, _) {
  var sim = forceSimulation(nodes),
      stopped = false,
      stop = sim.stop,
      restart = sim.restart;

  sim.stopped = function() { return stopped; };
  sim.restart = function() { return stopped = false, restart(); };
  sim.stop = function() { return stopped = true, stop(); };

  return setup(sim, _, true).on('end', function() { stopped = true; });
}