d3JS: Drawing Line Segments from CSV

后端 未结 2 1804
时光取名叫无心
时光取名叫无心 2021-01-24 09:41

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:<

2条回答
  •  余生分开走
    2021-01-24 10:22

    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.

提交回复
热议问题