score:0
Accepted answer
Use a custom center force with a strength parameter.
.force("center", myCenterForce(this.props.width / 2, this.props.height / 2))
In drag functions call
simulation.force("center").strength(0);
simulation.force("center").strength(1.0);
Or you can animate/interpolate the strength in the tick function.
var dragNode = null;
drag = simulation => {
const dragStarted = function (d) {
if (!d3.event.active) {
simulation.alphaTarget(0.7).restart()
}
dragNode = null;
d.fx = d.x
d.fy = d.y
}
const dragged = function (d) {
d.fx = d3.event.x
d.fy = d3.event.y
}
const dragEnded = function (d) {
if (!d3.event.active) simulation.alphaTarget(0);
dragNode = this;
d3.select(this).attr("data-strength", 0)
.transition().duration(2000)
.attr("data-strength", 1.0)
.on("end", function () { dragNode = null; } );
d.fx = null
d.fy = null
}
return d3
.drag()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded)
}
function tick() {
if (dragNode)
simulation.force("center")
.strength(d3.select(dragNode).attr("data-strength"));
// update nodes
}
Custom force
function myCenterForce(x, y) {
var nodes;
var strength = 1.0;
if (x == null) x = 0;
if (y == null) y = 0;
function force() {
var i,
n = nodes.length,
node,
sx = 0,
sy = 0;
for (i = 0; i < n; ++i) {
node = nodes[i], sx += node.x, sy += node.y;
}
for (sx = sx / n - x, sy = sy / n - y, i = 0; i < n; ++i) {
node = nodes[i], node.x -= strength * sx, node.y -= strength * sy;
}
}
force.initialize = function(_) {
nodes = _;
};
force.x = function(_) {
return arguments.length ? (x = +_, force) : x;
};
force.y = function(_) {
return arguments.length ? (y = +_, force) : y;
};
force.strength = function(_) {
return arguments.length ? (strength = +_, force) : strength;
};
return force;
}
Source: stackoverflow.com
Related Query
- How to force a specific amount of y axis ticks in d3 charts?
- how to stop movement of force directed graph on force.start
- How to stop a d3 force graph layout simulation?
- d3 v5 force simulation: how to use stop & tick
- How do I have a specific d3 node be an image in a force directed graph?
- D3.js Force Layout : How to stop initial movement in force layout graph?
- How to stop/pause a SPECIFIC force in d3?
- How do I create a custom force that constrains nodes to a specific area within an SVG?
- D3.js v4+ - How to determine specific location in force laypout
- How do i stop the label interaction in my force layout D3?
- D3 force diagram - how to trigger event when nodes stop repositioning
- How to call a specific node for a class in D3 force layout?
- How to make force layout graph in D3.js responsive to screen/browser size
- How do I capture keystroke events in D3 force layout?
- How to update elements of D3 force layout when the underlying data changes
- How to speed up the force layout animation in d3.js
- D3 force layout: How do I set the size of every node?
- how to prevent overlapping of link in force directed graph?
- how find out if force layout done placing the nodes?
- How to add compound node in a D3 force layout?
- How to tell when a D3 force layout has stopped
- How to force y position of one branch in d3 sankey plugin?
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- How to increase the length of a link in D3 force layout
- How to have a text label on links in d3 force directed graphs
- how to control the simulation speed of d3 force layout
- Stop Force Layout on d3js and start free dragging nodes
- D3 force layout: How to index data by its ID instead of its index in "nodes" array
- How do I change nodes to be rectangles instead of circles in a d3 force layout?
- NVD3 force specific width of bar in bar chart
More Query from same tag
- "NaN" when zooming and selecting by id
- Displaying images from a csv with d3
- d3plus not load data from csv
- How to change the orientation of an svg text
- D3.js spawn new circles at fixed time intervals with forceSimulation
- Expected ')' - SVG Transforms throwing error
- Issue on dc.js when update/redraw linechart
- How do I load JSON data synchronously with d3.js?
- .renderTitle(false) is not working on linechart DC.js
- Traverse Array of objects to generate d3 Sankey Chart data
- d3js multi-line chart is being drawn off the plot area - is update pattern to the issue?
- Placement of d3 brush resize groups
- Function chaining
- Make two pie charts with the same d3js code
- Error when generating line Chart, Uncaught TypeError: Cannot read property 'each' of undefined
- Creating tooltips for SVG objects after they were translated and scaled
- c3.js Accessing data objects/lines
- Why is my Bar Chart inverted?
- d3.js line chart overflows yAxis
- Positioning svg element over div
- D3.js. Grouping data in bar chart using d3.nest()
- D3js minimal reusable module not looping?
- Argument of type 'string[]' is not assignable to parameter of type 'ReadonlyArray<number>'
- D3: It is possible to do in D3?
- Angular 2 D3 drag function scoping issue
- Adding and removing elements from D3 Visualization with animation
- addEventListener doesn't work for element added by append method from d3js
- Move anchor point of image to its center
- How I can hide the root element in a dendogram d3
- Displaying coordinates in D3 from JSON array