In d3Js, How would one draw basic line segments from a tsv file? Say the file declare, in one row of data, x1,y1,x2,y2. I want to draw two line segments as in the data below:<
I already posted the answer below, just want to tell you that you could use this code too (with the same outcome) (I am mentioning it here as a help for you if you are more familiar with approach and philosophy of C++, Java or other similar languages):
function load(){
var svg = d3.select("body")
.append("svg")
.attr("width", 1000)
.attr("height", 1000);
d3.tsv("data/sampledata.tsv", function(error, data) {
data.forEach(function(d) {
svg.append("line")
.attr("x1", 1000 * d.x0)
.attr("y1", 1000 * d.y0)
.attr("x2", 1000 * d.x1)
.attr("y2", 1000 * d.y1)
.attr("stroke-width", d.weight)
.attr("stroke", "black");
});
});
};
So, there is explicit for loop here.
However, the answer that is on the bottom of the page is more in the spirit of D3 development. This answer nevertheless may help you mentally digest whats going on behind D3-powered code.