d3JS：从CSV中绘制线段 [英] d3JS: Drawing Line Segments from CSV
问题描述
在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 {return（d.y0）;}）
.attr（x2，function（d）{return（d.x1）;}）
.attr（y2 {return（d.y1）;}）
.attr（stroke-width，2）
.attr（stroke，black）;
} ）;
有人可以指点我的方向吗？文档主要涉及通过一系列数据创建路径，而我试图生成单独的线段。感谢您提供任何帮助。
以下代码应该可以正常工作。根据您的样式，您可能希望以不同的方式整理文件和代码，但您必须包含的关键部分是链 selectAll（line）。data（data）.enter（）。 append（line）。这是最常见的D3成语，也是给每个人学习D3最难的时间的一种，尤其是那些来自过程语言的背景。您可以查找D3文档，但今天晚些时候我还会尝试在此主题上写下一些内容。
data / sampledata.tsv ：
：
b
$ b
< html>
< head>
< title>两行< / title>
< script src =http://d3js.org/d3.v3.min.jscharset =utf-8>< / script>
< script src =script.js>< / script>
< / head>
< body onload =load（）>
< h2>两行< / 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 （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产生以下页面：
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:
x0 y0 x1 y1 weight
0.5 0.5 0.2 0.2 2
0.25 0.35 0.7 0.8 1
I'm having trouble with the d3.tsv function here. I'm confident that the code below is fundamentally wrong, but just to show what I'm trying to do...
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");
});
Could someone please point me in the right direction? The documentation out there refers mostly to creating paths through a series of data while I'm trying to produce individual line segments. Thanks in advance for any help.
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:
这篇关于d3JS：从CSV中绘制线段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
