d3.js - How do I change circular to rectangular node in D3 force layout -


can please let me know how change circular node rectangular node in d3 force directed graph? please see following code forced directed graph please find html script here.

you have append rect svg element instead of circle.

so, in script, shows this:

var node = svg.selectall(".node")       .data(graph.nodes)     .enter().append("circle")       .attr("class", "node")       .attr("r", 5)       .style("fill", function(d) { return color(d.group); })       .call(force.drag); 

you should change maybe this:

var node = svg.selectall(".node")       .data(graph.nodes)     .enter().append("rect")       .attr("class", "node")       .attr("width", 40)       .attr("height", 20)       .style("fill", function(d) { return color(d.group); })       .call(force.drag); 

and, shows:

node.attr("cx", function(d) { return d.x; })     .attr("cy", function(d) { return d.y; }); 

change to:

node.attr("x", function(d) { return d.x; })     .attr("y", function(d) { return d.y; }); 

Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -