Question

在d3Js中，如何从tsv文件中绘制基本线段？假设文件在一行数据中声明x1，y1，x2，y2。我想绘制两个线段，如下面的数据所示：

x0      y0      x1      y1      weight
0.5     0.5     0.2     0.2     2
0.25    0.35    0.7     0.8     1

我在使用d3.tsv函数时遇到问题。我相信下面的代码根本就是错误的，但只是为了展示我正在尝试做的事情......

d3.tsv("data/sampledata.tsv", function(error, data) {
data.forEach(function(d) {
    d.x0 = +d.x0;
    d.y0 = +d.y0;
    d.x1 = +d.x1;
    d.y1 = +d.y1;
});

 var line = svgContainer.append("line")
                     .attr("x1", function(d) { return (d.x0); })
                     .attr("y1", function(d) { return (d.y0); })
                     .attr("x2", function(d) { return (d.x1); })
                     .attr("y2", function(d) { return (d.y1); })
                     .attr("stroke-width", 2)
                     .attr("stroke", "black");

});

有人可以指出我正确的方向吗？那里的文档主要是指在我尝试生成单独的线段时通过一系列数据创建路径。提前感谢您的帮助。

Answer 1

以下代码应该有效。根据您的风格，您可能希望以不同方式组织文件和代码，但必须包含的关键部分是链 selectAll（“line”）。data（data）.enter（）。附加（ “线”）即可。这是最常见的D3习语，也是最让每个人都学习D3的时间 - 特别是那些来自程序语言背景的人。您可以查看D3文档，但我也会在今天晚些时候尝试写下关于此主题的内容。

数据/ sampledata.tsv ：

和你的一样。

的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");
    });
};

行动中的代码是here。 IT产生以下页面：

output page

Answer 2

我已经发布了下面的答案，只是想告诉你，你也可以使用这个代码（结果相同）（如果你对C ++的方法和哲学更熟悉，我在这里提一下它作为帮助，Java或其他类似语言）：

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");
        });        
    });
};

所以，这里有明确的循环。

然而，页面底部的答案更符合D3开发的精神。然而，这个答案可以帮助你在精神上消化D3驱动代码背后的最新情况。

d3JS：从CSV绘制线段

2 个答案: