force-layout

I am currently implementing arrows in my force layout as is done in this example ( http://bl.ocks.org/mbostock/1153292 ) and that works perfectly. However, one will quickly realize that the location and size of the arrows are hard-coded here since the nodes never change size. I have a graph were I dynamically change node sizes, and as such I would like the arrows to update accordingly since otherwise they are covered by the node or cover the node or are just not attached to the node. There is only one post I have found ( linking nodes of variable radius with arrows ) that talks about this

I adapted Ger Hobbelt's excellent example of group/bundle nodes https://gist.github.com/GerHobbelt/3071239 as a JSFiddle here: https://jsfiddle.net/NovasTaylor/tco2fkad/ The display demonstrates both collapsible nodes and regions (hulls). The one tweak that eludes me is how to add labels to expanded nodes. I have successfully added labels to nodes in my other force network diagrams using code similar to: nodes.append("text") .attr("class", "nodetext") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { // d.name is a label for the node, present in the JSON source return d.name; }); Is

I use the force layout in D3.js v4. Now I want to click on a node and use the force physics like collide for that one node only. The simulation for every node on the entire SVG is this: var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.index })) .force("collide", d3.forceCollide(function(d) { return d.r + 8 }).iterations(16)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(chartWidth / 2, chartWidth / 2)) Now I want to change the collide behavior for the one node I clicked on to push other nodes away or attract them. Is there

I would like to highlight the edges of a graph when the connected nodes are hovered. I took inspiration from the Bundle example : However the on() function is not giving the d object to the onmouse function: d3.json("graph_file.json", function(json) { force .nodes(json.nodes) .links(json.links) .start(); var link = svg.selectAll("line.link") .data(json.links) .enter().append("line") .attr("class", function(d) { return "link source-" + d.source.key + " target-" + d.target.key; }) .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var node = svg.selectAll("circle.node") .data

I'm trying to add different shapes to my d3 force layout but unsucessfully. The end goal is determine the shape based on properties of the node object itself. I'm using selection.enter() to then .append() the shapes like so. As the force directed layout only takes one array of nodes, and .append() takes a string and not a function node = vis.selectAll('.node') .data(nodes, function(d) { return d.filename }); then... node.enter() .append(**'rect'**) //I need to vary this based on node properties .attr('class', function(d) { return 'node ' + d.entityType; //return d.entityType; }); I am unsure