Drawing D3 lines of reading from a JSON - d3.js

Question

I am working on a D3 project and I am wondering how can I draw lines between two points by reading the data from a JSON document. Document provides 4 Xs and 4 Ys values, I couldn't find a way to do it efficiently and everything I tried just got me errors(code doesn't work). Because it is 15000+ lines and it is impossible me to write the coordinates one by one also it is not a way to create a dynamic program/software.
Thanks in advance !

Answer 1

Create your container :
var svg = d3.select('#container').append('svg')
.attr('width', 500)
.attr('height', 500)
Your data :
var thisData = {
x1: 50,
y1: 50,
x2: 450,
y2: 450
};
Create your link using the data above (or your own) :
var link = svg.selectAll(".link")
.data([thisData]) //data above
.enter().append("line")
.attr("class", "link")
.style('stroke','black')
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
Position links :
link.attr("x1", function(d) { console.log(d); return d.x1; })
.attr("y1", function(d) { return d.y1; })
.attr("x2", function(d) { return d.x2; })
.attr("y2", function(d) { return d.y2; });
All this needs is two points, [X1,Y1] & [X2,Y2] or in your case 15000 links. D3 will handle it all for you :))
var svg = d3.select('#container').append('svg')
.attr('width', 500)
.attr('height', 500)
//.append('g')
var thisData = {
x1: 50,
y1: 50,
x2: 450,
y2: 450
};
var link = svg.selectAll(".link")
.data([thisData])
.enter().append("line")
.attr("class", "link")
.style('stroke','black')
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
//console.log(line);
link.attr("x1", function(d) { console.log(d); return d.x1; })
.attr("y1", function(d) { return d.y1; })
.attr("x2", function(d) { return d.x2; })
.attr("y2", function(d) { return d.y2; });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='container'>
</div>
As long as your data looks like the above data or a set of points like so :
var thisData = { //first line
x1: 50,
y1: 50,
x2: 450,
y2: 450
},
{ //second
x1: 50,
y1: 50,
x2: 450,
y2: 450
},
{//third
x1: 50,
y1: 50,
x2: 450,
y2: 450
};
EDIT
Here is how you would show your data.
Updated fiddle : https://jsfiddle.net/reko91/odcyduvf/1/
I have set attached your data to a variable - 'thisData'.
Now to just draw the links you want to pass the links to D3 like above, like this :
.data(thisData.links)
Im not sure why you have x1,x2,x3,x4. If this is a path, for example, the points would be x1,y1 : x2,y2 : x3,y3 and so on then you can need to format your code so each individual link has x1,y1,x2,y2.
I would have shown all your data, but JSFiddle cant handle 135,000 lines of data :P