d3JS: Drawing Line Segments from CSV

后端未结

关注

 2  1801

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

The code below should work. Depending on your style, you may want to organize files and code differently, but the key part you must include is chain selectAll("line").data(data).enter().append("line"). This is the most frequent D3 idiom, and also the one that gives the hardest time to everyone learning D3 - especially to those that come from the background of procedural languages. You can look up D3 documentation, but I will also try to write down something on this topic later today.

data/sampledata.tsv:

same as yours.

index.html:

<html>
<head>
    <title>Two Lines</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="script.js"></script>
</head>
<body onload="load()">
    <h2>Two Lines</h2>
</body>
</html>

script.js:

function load(){
    var svg = d3.select("body")
        .append("svg")
        .attr("width", 1000)
        .attr("height", 1000);
    d3.tsv("data/sampledata.tsv", function(error, data) {
        svg.selectAll("line")
            .data(data)
           .enter()
            .append("line")
            .attr("x1", function(d) { return (1000 * d.x0); })
            .attr("y1", function(d) { return (1000 * d.y0); })
            .attr("x2", function(d) { return (1000 * d.x1); })
            .attr("y2", function(d) { return (1000 * d.y1); })
            .attr("stroke-width", function(d) { return (d.weight); })
            .attr("stroke", "black");
    });
};

The code in action is here. IT produces following page:

output page

0 讨论(0)

余生分开走

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.
0 讨论(0)
发布评论:

提交评论
- 加载中...