Javascript – Introducing Arrow(directed), in Force Directed Graph d3

d3.jsforce-layoutjavascript

I am using the force-directed graph in the sample here – http://bl.ocks.org/mbostock/4062045

But since my data is directed, I need the links in the graph to be represented as arrow connections. Maybe like in, http://bl.ocks.org/d3noob/5141278.

Can someone please suggest the alterations or additions that create a directed graph as in http://bl.ocks.org/mbostock/4062045

I am new to D3, and I couldn't find a solution, maybe its trivial, but a little help is appreciated.

Best Answer

Merging these two examples is straightforward, and I created a JSFiddle to demo. First, add the definition of the arrow style to the SVG:

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

Then just add the marker to your links

.attr("marker-end", "url(#end)");

You end up with something like this:

enter image description here

You'll see that some arrows are bigger than others, because not all links have the same stroke-width. If you want to make all the arrows the same size, just modify

.style("stroke-width", function(d) { return Math.sqrt(d.value); })

when adding the links.

Related Solutions

Java – Listing the index of duplicate values in an int array

I think you should use a List to record the indexs

List<Integer> indexs =new ArrayList<Integer>();
for (p = 0; p < array.length; p++) {
    if(array[p]==search) {
        indexs.add(p);
    }
}
if(p.length()>0){
    //print the result
}

MongoDB Find an element in an array (subdocument)

That does work.

> db.test.insert({_id:"1", employees:[{ eid:"2", ename:"test", is_user:true }, { eid:"3", ename:"test2", is_user:true } ] })
> db.test.find({_id:"1","employees.eid":"2"});
{ "_id" : "1", "employees" : [  {   "eid" : "2",    "ename" : "test",  "is_user" : true },  {   "eid" : "3",    "ename" : "test2", "is_user" : true } ] }

For the $ operator you want to use it like:

> db.test.insert({_id:"1", employees:[{ eid:"2", ename:"test", is_user:false }, { eid:"3", ename:"test2", is_user:false } ] })
> db.test.find({_id:"1", "employees.eid":"2", "employees.is_user": true});
> db.test.update({_id:"1", "employees.eid":"2"}, {$set: {"employees.$.is_user": true}});
> db.test.find({_id:"1", "employees.eid":"2", "employees.is_user": true});
{ "_id" : "1", "employees" : [  {   "eid" : "2",    "ename" : "test",   "is_user" : true },     {   "eid" : "3",    "ename" : "test2",  "is_user" : false } ] }

Notice how the insert of is_user is set to false on both objects in the array and after the update the matching object is updated from false to true, is that what you are looking for?

Best Answer

Related Solutions

Java – Listing the index of duplicate values in an int array

MongoDB Find an element in an array (subdocument)

Related Topic