1

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

});

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

4

2 回答 2

1

下面的代码应该可以工作。根据您的风格，您可能希望以不同的方式组织文件和代码，但您必须包含的关键部分是链selectAll("line").data(data).enter().append("line")。这是最常见的 D3 习语，也是让每个学习 D3 的人都度过最艰难时光的习语——尤其是那些有程序语言背景的人。你可以查阅 D3 文档，但我也会在今天晚些时候尝试写下关于这个主题的一些内容。

数据/sampledata.tsv：

和你一样。

索引.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>

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

实际代码在这里。IT 生成以下页面：

输出页面

于 2013-12-25T09:01:49.797 回答
1

我已经在下面发布了答案，只是想告诉您，您也可以使用此代码（结果相同）（如果您更熟悉 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");
        });        
    });
};

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

但是，页面底部的答案更符合 D3 开发的精神。尽管如此，这个答案可能会帮助您在精神上消化 D3 驱动的代码背后发生的事情。

于 2013-12-25T14:22:42.710 回答