javascript - How to make the distance from nodes in d3.js force layout larger? -


i trying represent data d3js force layout. have following code:

<script>  var svg = d3.select("svg"),       width = +svg.attr("width"),       height = +svg.attr("height");  var color = d3.scaleordinal(d3.schemecategory20);   var simulation = d3.forcesimulation()       .force("link", d3.forcelink().id(function(d) { return d.id; }))       .force("charge", d3.forcemanybody())       .force("center", d3.forcecenter(width / 2, height / 2));   var jsondata = json.parse(data);  var totalamount=jsondata.total;  d3.json("mydata.json", function(error, graph) {  if (error) throw error;  var nodes = json.nodes;  var link = svg.append("g")         .attr("class", "links")         .selectall("line")         .data(graph.links)         .enter().append("line")         //.attr("stroke-width", function(d) { return math.sqrt(d.value); });         .attr("stroke-width",4)  var node = svg.append("g")         .attr("class", "nodes")         .selectall("circle")         .data(graph.nodes)         .enter().append("circle")         .attr("r", 5)         .attr("fill", function(d) { return color(d.group); })         .call(d3.drag()                 .on("start", dragstarted)                 .on("drag", dragged)                 .on("end", dragended));  node.append("title")         .text(function(d) { return d.id; });  simulation         .nodes(graph.nodes)         .on("tick", ticked);  simulation.force("link")         .links(graph.links);  function ticked() {   link           .attr("x1", function(d) { return d.source.x; })           .attr("y1", function(d) { return d.source.y; })           .attr("x2", function(d) { return d.target.x; })           .attr("y2", function(d) { return d.target.y; });    node           .attr("cx", function(d) { return d.x; })           .attr("cy", function(d) { return d.y; });     }   });    function dragstarted(d) {      if (!d3.event.active) simulation.alphatarget(0.3).restart();      d.fx = d.x;       d.fy = d.y;   }     function dragged(d) {       d.fx = d3.event.x;       d.fy = d3.event.y;    }     function dragended(d) {       if (!d3.event.active) simulation.alphatarget(0);       d.fx = null;       d.fy = null;    }

however, in output, nodes close each others in photo: my result

i checked links correct (basically have 1 source , many target nodes.)

how can make larger distance between nodes? help.

try this

simulation = d3.forcesimulation()         .force("link", d3.forcelink().distance(value).id(function(d) { return d.id; })) ...

where value number


-

Comments

Post a Comment

Popular posts from this blog

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

angular - Is it possible to get native element for formControl? -

i've got angular2 reactive form . created formcontrol s , assigned input fields by [formcontrol]=... . understand creates nativeelement <-> formcontrol link. my question: possible nativeelement formcontrol ? wanna myformcontrol.nativeelement.focus() i can share 1 terrible solution works me. in reactive forms can use either 1) formcontroldirective ts mycontrol = new formcontrol('') template <input type="text" [formcontrol]="mycontrol"> or 2) formcontrolname ts myform: formgroup; constructor(private fb: formbuilder) {} ngoninit() { this.myform = this.fb.group({ foo: '' }); } template <form [formgroup]="myform"> <input type="text" formcontrolname="foo"> </form> so these directives write patch like 1) formcontroldirective const originformcontrolngonchanges = formcontroldirective.prototype.ngonchanges; formcontroldirective.proto
Read more

javascript - Why jQuery Select box change event is now working? -

i working on product filters user select select box according his/her preference not getting selected value user in jquery. html code:- <select name="product_filter" id="product_filter"> <option value="price_low_first">price : low high</option> <option value="price_high_first">price : high low</option> <option value="latest">latest</option> <option value="popular">most popular</option> </select> jquery code: $(function () { $("#product_filter").change(function () { alert("hi") var selectedtext = $(this).find("option:selected").text(); var selectedvalue = $(this).val(); alert("selected text: " + selectedtext + " value: " + selectedvalue); }); }); hi believe code perfect. once please check jquery.min.js
Read more