How to use the d3-force.forceManyBody 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 opennetworkinglab / onos / web / gui2-topo-lib / projects / gui2-topo-lib / src / lib / layer / forcesvg / models / force-directed-graph.ts View on Github external
constructor(options: Options, public log: LogService) {
        this.canvasOptions = options;
        const ticker = this.ticker;

        // Creating the force simulation and defining the charges
        this.simulation = d3.forceSimulation()
            .force('charge',
                d3.forceManyBody().strength(this.charges.bind(this)))
            // .distanceMin(100).distanceMax(500))
            .force('gravity',
                d3.forceManyBody().strength(FORCES.GRAVITY))
            .force('friction',
                d3.forceManyBody().strength(FORCES.FRICTION))
            .force('center',
                d3.forceCenter(this.canvasOptions.width / 2, this.canvasOptions.height / 2))
            .force('x', d3.forceX())
            .force('y', d3.forceY())
            .on('tick', () => {
                ticker.emit(this.simulation); // ForceSvgComponent.ngOnInit listens
            });

    }
github Caleydo / lineage / src / graph.ts View on Github external
.attr('id', 'hiddenLinks');
    // .attr('transform', 'translate(520,0)');

    this.svg.append('g')
      .attr('class', 'nodes')
      .attr('id', 'nodeGroup');

    this.svg.append('g')
      .attr('class', 'endMarkers');



    this.simulation = forceSimulation()
      .force('link', forceLink().id(function (d: any) { return d.index; }))
      .force('collide', forceCollide(function (d: any) { return 30; }).iterations(16))
      .force('charge', forceManyBody())
      .force('center', forceCenter(this.forceDirectedWidth / 2, this.forceDirectedHeight / 2))
      .force('y', forceY(0))
      .force('x', forceX(0));

    // this.simulation = forceSimulation()
    //   .force('link', forceLink().strength(5))
    //   .force('charge', forceManyBody().strength(-300))
    //   .force('center', forceCenter(forceWidth / 2, this.forceDirectedHeight / 2))
    //   .force('collision', forceCollide().radius(20));

  }
github greenbone / gsa / ng / src / web / components / chart / topology.js View on Github external
}

      links = [...linksSet];
      hosts = hosts.slice(0, MAX_HOSTS);
    }

    const linkForce = forceLink(links)
      .id(l => l.id)
      .strength(0.2);

    const gravityXForce = forceX().strength(0.03);
    const gravityYForce = forceY().strength(0.03);

    this.simulation = forceSimulation(hosts)
      .force('link', linkForce)
      .force('charge', forceManyBody().strength(-20))
      .force('center', forceCenter(width / 2, height / 2))
      .force('gravityX', gravityXForce)
      .force('gravityY', gravityYForce)
      .alphaMin(0.1)
      .alphaDecay(0.02276278) // alphaMin and alphaDecay result in ~100 ticks
      .on('tick', () => {
        this.setState({hosts, links});
      });
  }
github khartec / waltz / waltz-ng / client / playpen / 4 / flow-explorer / flow-explorer.js View on Github external
Styles
} from "./flow-explorer-utils";


// -- d3

const dimensions = {
    svg: {
        w: 1100,
        h: 600
    }
};


const simulation = forceSimulation()
    .force('charge', forceManyBody()
        .strength(-20))
    .force('collide', forceCollide(15))
    .force('x', forceX(dimensions.svg.w / 2)
        .strength(0.4)
        .x(n => {
            const centerPoint = dimensions.svg.w / 4 * 3;  // 'center is 3/4 to the right'

            const downstreams = n.downstreams || [];
            const minXs = _.flatMap(downstreams, d => {
                return d.fx
                    ? [d.fx, d.x]
                    : [d.x];
            });

            const minX = _.min(minXs);
            return (minX || centerPoint) - 100;
github samccone / bundle-buddy / viz / src / NetworkZoom.js View on Github external
selectedSource,
  containerWidth
}) {
  const svg = select("svg#networkZoom");
  const maxLines = max(nodes, d => d.size);
  const size = scaleSqrt().domain([1, maxLines]).range([1, 60]);
  const cacheMatch = cachedPositions[`${selectedBundles}-${window.innerWidth}`];
  if (cacheMatch) {
    nodes = JSON.parse(cacheMatch.nodes);
    links = JSON.parse(cacheMatch.links);
  } else {
    const simulation = forceSimulation()
      .force("link", forceLink().id(d => d.id).strength(0.06))
      .force("collide", forceCollide().radius(d => size(d.size) + 1))
      .force("forceX", forceX(height / 2).strength(0.05))
      .force("charge", forceManyBody().strength(-50))
      .force("center", forceCenter(width / 2, height / 2))
      .force(
        "forceY",
        forceY(
          d =>
            d.id === selectedBundles
              ? height / 4
              : d.type === "input" ? height / 2 : height * 3 / 4
        ).strength(2)
      )
      .stop();

    const totalInputNodes = nodes.filter(d => d.type === "input").length;
    const inputIncrement = width / (totalInputNodes + 1);
    const totalOtherBundles = nodes.length - totalInputNodes - 1;
    const otherBundleIncrement = width / (totalOtherBundles + 1);
github iamhosseindhv / Network-Visualisation / app / src / react-d3-graph / components / graph / graph.helper.js View on Github external
function _createForceSimulation(width, height) {
    const frx = d3ForceX(width / 2).strength(CONST.FORCE_X);
    const fry = d3ForceY(height / 2).strength(CONST.FORCE_Y);

    return d3ForceSimulation()
        .force('charge', d3ForceManyBody().strength(CONST.FORCE_IDEAL_STRENGTH))
        .force('x', frx)
        .force('y', fry);
}
github btd / rollup-plugin-visualizer / src / script-network.js View on Github external
const simulation = forceSimulation()
    .force(
      "link",
      forceLink()
        .id(d => d.id)
        .strength(1)
        .distance(50)
        .iterations(10)
    )
    .force(
      "collide",
      forceCollide().radius(d => size(d.renderedLength) + 1)
    )
    .force("forceX", forceX(height / 2).strength(0.05))
    .force("charge", forceManyBody().strength(-100))
    .force("center", forceCenter(width / 2, height / 2));

  simulation.nodes(nodes);
  simulation.force("link").links(links);
  simulation.stop();

  for (let i = 0; i < 300; i++) simulation.tick();

  let xExtent = d3extent(nodes, d => d.x);
  let yExtent = d3extent(nodes, d => d.y);

  const xRange = xExtent[1] - xExtent[0];
  const yRange = yExtent[1] - yExtent[0];

  //rotate
  if (yRange > xRange) {
github khartec / waltz / waltz-ng / client / logical-flow / components / boingy-graph / boingy-graph.js View on Github external
.range([0.4, 1])
    .clamp(true);

const nodeSizeScale = scalePow()
    .range([5, 10])
    .clamp(true);

const DEFAULT_TWEAKER = {
    enter: (selection) => selection,
    exit: (selection) => selection,
    update: (selection) => selection
};

const simulation = forceSimulation()
    .force("link", forceLink().id(d => d.id))
    .force("charge", forceManyBody().strength(-110).distanceMin(1).distanceMax(400))
    .force("x", forceX())
    .force("y", forceY())
    .alphaTarget(0);

const actorSymbol = symbol()
    .size(128)
    .type(symbolWye);


function mkLinkData(flows = []) {
    return _.chain(flows)
        .map(f => ({
            id: `${ f.source.id }_${ f.target.id }`,
            source: f.source.id,
            target: f.target.id,
            data: f