Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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
});
}
.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));
}
}
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});
});
}
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;
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);
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);
}
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) {
.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