CODEWITHSUNDEEP
javascripthtmld3.js
It_be_like_that
It_be_like_that

Reputation: 43

Network Graph D3. Different Lengths


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

.node {
stroke: #fff;
stroke-width: 1.5px;
}

.nodeDetail {
stroke: #fff;
stroke-width: 1.5px;
}

.link {
stroke: #999;
stroke-opacity: .6;
}

 .text {
font: 12px sans-serif;
pointer-events: none; }

.node {
stroke:#fff;
stroke-width:3px;
fill:#008876;

}

</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js"></script>

<script>
var graph = {
"nodes":[
{"name":"RFID Scanner","group":1},
{"name":"Chemical 1 Tag ID: 10001 ","group":1},
{"name":"Chemical 2 Tag ID: 10002","group":1},
{"name":"Chemical 3 Tag ID: 10003","group":1},
{"name":"Chemical 4 Tag ID: 10004","group":1}
],
"links":[
{"source":0,"target":1,"value":1 },
{"source":0,"target":2,"value":1},
{"source":0,"target":3,"value":1},
{"source":0,"target":4,"value":1},
{"source":0,"target":0,"value":1}
]
};
var width = 1000,
    height = 1000;


var force = d3.layout.force()
.charge(-300)
.linkDistance(100)
.linkStrength(15)
.size([width,height]);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var drawGraph = function(graph) {
force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();

var link = svg.selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) { return Math.sqrt(d.value); });

var gnodes = svg.selectAll('g.gnode')
 .data(graph.nodes)
 .enter()
 .append('g')

 .classed('gnode', true);

var node = gnodes.append("circle")
  .attr("class", "node")
  .attr("r", function(d) { return d.name === 'RFID Scanner'? 40 : 20; })
  .call(force.drag)


  .filter(function(d) { return d.name !== 'RFID Scanner'})
  .on("mouseover", function(d)
 {
     d3.select(labels[0][d.index]).style("visibility","visible")
 })
   .on("mouseout", function(d)
 {
     d3.select(labels[0][d.index]).style("visibility","hidden")
 })


 var labels = gnodes.append("text")
  .text(function(d) { return d.name; })
  .style("visibility", function(d) { return d.name === 'RFID Scanner'? 'visible' : 'hidden'; });


 force.on("tick", function() {
 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; });

 gnodes.attr("transform", function(d) { 
    return 'translate(' + [d.x, d.y] + ')'; 
}); 
});
};

drawGraph(graph);
</script>
</body>
</html>

Im trying to make different lengths in the network graph. I went through the API and I think it has something to do w .linkDistance(100). I am not too sure how to go about doing this. but I want to give each node a specific length. I tried going through the links data that I hard coded but it seems pretty limited. Thank you in advance, im curious to see how you do this.

Upvotes: 1

Views: 171

Answers (1)

Mehdi
Mehdi

Reputation: 7413

It appears that you are using d3.js version 3.

The documentation about linkDistance states:

if distance is a function, then the function is evaluated for each link (in order), being passed the link and its index, with the this context as the force layout; the function's return value is then used to set each link's distance.

So if each link valueattribute contains the desired distance, instead of:

.linkDistance(100)

You may specify:

.linkDistance(function(d) {return d.value})

Upvotes: 2

Related Questions