Menu
I'm attemtping to draw three circles and draw connected lines between each of these circles.
The end goal is to configure what circles are connected using json configuration but prior to this im just trying to connect the circles using the callbacks and hard code values.
Here is what I have so far :
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body style="overflow: hidden;">
<div id="canvas" style="overflow: hidden;"></div>
<script type="text/javascript">
var graph = {
"nodes":[
{"name":"1","group":1, "x" : 100, "y" : 100 , r : 20},
{"name":"2","group":1, "x" : 200, "y" : 150 ,r : 30},
{"name":"3","group":2 , "x" : 300, "y" : 250 , r : 50}
],
"links":[
{"source":1,"target":0,"value":1}
]
}
var width = 2000;
var height = 500;
var svg = d3.select("#canvas").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var lines = svg.attr("class", "line")
.selectAll("line").data(graph.links)
.enter().append("line")
.attr("x1", function(d) { return 50 })
.attr("y1", function(d) { return 50 })
.attr("x2", function(d) { return 100 })
.attr("y2", function(d) { return 100 })
var circles = svg.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", function(d, i){ return d.r })
.attr("cx", function(d, i){ return d.x })
.attr("cy", function(d, i){ return d.y })
</script>
</body>
</html>
But no lines are being drawn. Each circle should contain a single line connecting it to the other circle. I'm just hard coding the x1,y1,x2,y2 co-ordinates but I will be using the co-ordinates of the other circles in order to determine the postions of the lines. Why are the lines not being drawn ? Is there standard d3 methods I should be utilising in order to connect these circles ?
fiddle : http://jsfiddle.net/zzz8svuq/10/
Update :
Here is the updated code which draws connected lines between circles as configured in dataset graph.nodes :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body style="overflow: hidden;">
<div id="canvas" style="overflow: hidden;"></div>
<script type="text/javascript">
var graph = {
"nodes": [
{name: "1", "group": 1, x: 100, y: 50, r: 10 , connected : "2"},
{name: "2", "group": 1, x: 200, y: 90, r: 15, connected : "1"},
{name: "3", "group": 2, x: 300, y: 230, r: 25, connected : "1"}
]
}
$( document ).ready(function() {
var width = 2000;
var height = 500;
var svg = d3.select("#canvas").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var lines = svg.attr("class", "line")
.selectAll("line").data(graph.nodes)
.enter().append("line")
.style("stroke", "gray") // <<<<< Add a color
.attr("x1", function (d, i) {
return d.x
})
.attr("y1", function (d) {
return d.y
})
.attr("x2", function (d) {
return findAttribute(d.connected).x
})
.attr("y2", function (d) {
return findAttribute(d.connected).y
})
var circles = svg.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", function (d, i) {
return d.r
})
.attr("cx", function (d, i) {
return d.x
})
.attr("cy", function (d, i) {
return d.y
});
});
function findAttribute(name) {
for (var i = 0, len = graph.nodes.length; i < len; i++) {
if (graph.nodes[i].name === name)
return graph.nodes[i]; // Return as soon as the object is found
}
return null; // The object was not found
}
</script>
</body>
</html>
614
Draw a line between two points. Draw a perpendicular line passing through a point. Draw a line at a particular angle passing through a point. Construct a circle with a given line segment as the diameter.
You need to make sure that the lines have a stroke color or else they will be drawn white and you won't be able to see them.
var lines = svg.attr("class", "line")
.selectAll("line").data(graph.links)
.enter().append("line")
.style("stroke", "gray") // <<<<< Add a color
.attr("x1", function(d) { return 50 })
.attr("y1", function(d) { return 50 })
.attr("x2", function(d) { return 100 })
.attr("y2", function(d) { return 100 })
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
