I am newbie to D3. I am using force directed graph. I want to add two different type of shapes at node's places.
My json is following:
{
"nodes":[
{"name":"00:00:00:00:00:00:00:01","group":0,"shape":1},
{"name":"00:00:00:00:00:00:00:02","group":1,"shape":1},
{"name":"00:00:00:00:00:00:00:03","group":2,"shape":1},
{"name":"00:00:00:00:00:00:00:11","group":0,"shape":0},
{"name":"00:00:00:00:00:00:00:21","group":1,"shape":0},
{"name":"00:00:00:00:00:00:00:31","group":2,"shape":0},
{"name":"00:00:00:00:00:00:00:32","group":2,"shape":0},
{"name":"00:00:00:00:00:00:00:12","group":0,"shape":0},
{"name":"00:00:00:00:00:00:00:22","group":1,"shape":0}
],
"links":[
{ "source": 0, "target": 0, "value": 5 },
{ "source": 1, "target": 1, "value": 5 },
{ "source": 2, "target": 2, "value": 5 },
{ "source": 3, "target": 0, "value": 5 },
{ "source": 4, "target": 1, "value": 5 },
{ "source": 5, "target": 2, "value": 5 },
{ "source": 6, "target": 2, "value": 5 },
{ "source": 7, "target": 0, "value": 5 },
{ "source": 8, "target": 1, "value": 5 }
]
}
If shape value is 1, then draw circle, and if shape value is 0, then draw rectangle. Force directed graph example link is: http://bl.ocks.org/mbostock/4062045
I have tried example link JSFiddle: http://jsfiddle.net/mayurchavda87/Sc2xC/3/
You can do this, as shown in e.g. this example, by using a symbol generator and path elements instead of SVG elements for specific shapes. The code to add shapes becomes
var node = svg.selectAll(".node")
.data(data.nodes)
.enter().append("path")
.attr("class", "node")
.attr("d", d3.svg.symbol()
.type(function(d) { return d3.svg.symbolTypes[d.s]; }))
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
Then you also need to change your tick handler to change the transform attribute of the path elements:
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
Complete jsfiddle here.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments