How to use the d3-force.forceCenter 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
// -------------------------------------------------------------------------------------
// Test Pre-Defined Forces
// -------------------------------------------------------------------------------------

// Centering ===========================================================================

// create Centering force --------------------------------------------------------------

let forceCenter: d3Force.ForceCenter;

// without specified center point (i.e. defaults to [0, 0])
forceCenter = d3Force.forceCenter();

// with x-coordinate of center point
forceCenter = d3Force.forceCenter(100);

// with x- and y-coordinate of center point
forceCenter = d3Force.forceCenter(100, 100);

// Configure Centering force -----------------------------------------------------------

forceCenter = forceCenter.x(150);
num = forceCenter.x();

forceCenter = forceCenter.y(150);
num = forceCenter.y();

// Use Centering force -----------------------------------------------------------------

forceCenter.initialize(graph.nodes);
forceCenter(0.1); // alpha
github DefinitelyTyped / DefinitelyTyped / types / d3-force / d3-force-tests.ts View on Github external
// -------------------------------------------------------------------------------------

// Centering ===========================================================================

// create Centering force --------------------------------------------------------------

let forceCenter: d3Force.ForceCenter;

// without specified center point (i.e. defaults to [0, 0])
forceCenter = d3Force.forceCenter();

// with x-coordinate of center point
forceCenter = d3Force.forceCenter(100);

// with x- and y-coordinate of center point
forceCenter = d3Force.forceCenter(100, 100);

// Configure Centering force -----------------------------------------------------------

forceCenter = forceCenter.x(150);
num = forceCenter.x();

forceCenter = forceCenter.y(150);
num = forceCenter.y();

// Use Centering force -----------------------------------------------------------------

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

// Collision ===========================================================================
github antvis / G6 / src / layout / force.js View on Github external
return;
    }
    let simulation = self.forceSimulation;
    const alphaMin = self.alphaMin;
    const alphaDecay = self.alphaDecay;
    const alpha = self.alpha;
    if (!simulation) {
      try {
        // 定义节点的力
        const nodeForce = d3Force.forceManyBody();
        if (self.nodeStrength) {
          nodeForce.strength(self.nodeStrength);
        }
        simulation = d3Force.forceSimulation()
          .nodes(nodes)
          .force('center', d3Force.forceCenter(self.center[0], self.center[1]))
          .force('charge', nodeForce)
          .alpha(alpha)
          .alphaDecay(alphaDecay)
          .alphaMin(alphaMin)
          .on('tick', () => {
            self.tick();
          })
          .on('end', () => {
            self.ticking = false;
            self.onLayoutEnd && self.onLayoutEnd();
          });
        if (self.preventOverlap) {
          self.overlapProcess(simulation);
        }
        // 如果有边,定义边的力
        if (edges) {
github abcnews / census-100-people / src / index.js View on Github external
function initSimulations() {
    // Attempt to fix bug where dots clump on load in production site
    width = parseInt(svgSelection.style('width'));
    height = parseInt(svgSelection.style('height'));

    simulationGroups = force.forceSimulation()
        .force('gravity', force.forceCenter(width/2, height/2))
        .force('attract', force.forceManyBody().strength(1010).distanceMin(10))
        .force('repel', force.forceManyBody().strength(-1000).distanceMax(
            Math.min(width, height) - margin * 2 + 90)
            )
        .force('collide', force.forceCollide(75))
        .stop();

    simulationNodes = force.forceSimulation()
        .force('x', force.forceX(d => (d.group && d.group.x) ? d.group.x : width/2).strength(0.05))
        .force('y', force.forceY(d => (d.group && d.group.y) ? d.group.y : height/2).strength(0.05))
        .force('collide', force.forceCollide(markMargin).strength(1))
        .on('tick', tick);
}
github openintegrationhub / openintegrationhub / services / web-ui / src / component / flows / flow-graph / index.js View on Github external
function generateSimulation(props) {
    const {
        data, height, width, maxSteps, strength,
    } = props;
    if (!data) {
        return { nodes: [], links: [] };
    }
    // copy the data
    const nodes = data.nodes.map(d => ({ ...d }));
    const links = data.links.map(d => ({ ...d }));
    // build the simuatation
    const simulation = forceSimulation(nodes)
        .force('link', forceLink().id(d => d.id))
        .force('link', forceLink().id(d => d.id).distance([150]))
        .force('charge', forceManyBody().strength(strength || -80))
        .force('center', forceCenter(width / 2, height / 2))
        .stop();

    simulation.force('link').links(links);


    const upperBound = Math.ceil(
        Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()),
    );
    for (let i = 0; i < Math.min(maxSteps, upperBound); i += 1) {
        simulation.tick();
    }

    return { nodes, links };
}
github uber / react-vis / showcase / examples / force-directed-graph / force-directed-graph.js View on Github external
function generateSimulation(props) {
  const {data, height, width, maxSteps, strength} = props;
  if (!data) {
    return {nodes: [], links: []};
  }
  // copy the data
  const nodes = data.nodes.map(d => ({...d}));
  const links = data.links.map(d => ({...d}));
  // build the simuatation
  const simulation = forceSimulation(nodes)
    .force('link', forceLink().id(d => d.id))
    .force('charge', forceManyBody().strength(strength))
    .force('center', forceCenter(width / 2, height / 2))
    .stop();

  simulation.force('link').links(links);

  const upperBound = Math.ceil(
    Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())
  );
  for (let i = 0; i < Math.min(maxSteps, upperBound); ++i) {
    simulation.tick();
  }

  return {nodes, links};
}
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 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) {
    nodes.forEach(d => {
github samccone / bundle-buddy / viz / src / NetworkZoom.js View on Github external
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);
    let inputCounter = 0;