来自多个 CSV 的 d3.js 链接点

Question

我是 d3.js 的新手，并试图从视频中提取的点创建一个简笔画。 每个csv都有时间（V1）宽度（V2）和高度（V3）。每个 csv 都包含 body 成员的数据。

目前，我已经设法展示了每个成员的动作，但是例如在创建两个肩膀之间的链接时我被卡住了。

这是我的代码。

tsv 看起来像这样：

"","V1","V2","V3","V4","V5","Arc_tangent"
"497",16534,-17,194,"Gamme1","G1M4",95.0149703115723
"498",16567,-14,194,"Gamme1","G1M4",94.1345252720128
"499",16600,-8,195,"Gamme1","G1M4",92.3560812239648
"500",16634,-4,199,"Gamme1","G1M4",91.1582332417969
"501",16667,-2,202,"Gamme1","G1M4",90.5739377208393
"502",16700,1,208,"Gamme1","G1M4",89.7311508785662
"503",16734,4,213,"Gamme1","G1M4",88.9306996559012

还有代码：

var width=600,height=400;

var rayon=25;
var canvas3=d3.select(".trois")
    .append("svg")
    .attr("width",width).attr("height",height)
    .append("g")
    .attr("transform", "translate(0,0)");

var x = d3.scale.linear()
.domain([-200,200])
.range([5, width]);
var y = d3.scale.linear()
.domain([-100,250])
.range([height,5]);

d3.csv("donnees/VepauledG1M4.tsv", function(error, ed) {
ed.forEach(function(d) { 
    d.V1 =+ parseInt(d.V1); 
    d.V2 =+ parseInt(d.V2);
    d.V3 =+ parseInt(d.V3); 
});         
d3.csv("donnees/VepaulegG1M4.tsv", function(error, eg) {
eg.forEach(function(d) { 
    d.V1 =+ parseInt(d.V1); 
    d.V2 =+ parseInt(d.V2);
    d.V3 =+ parseInt(d.V3); 
});     

var pointsepauled=canvas3.selectAll(".pointsepauled") 
.data(ed)
  .enter().append("circle") 
.attr("cx",function(d) { return x(d.V2); })
.attr("cy",function(d) { return y(d.V3); })
.attr("r", 2)
.attr("class","pointsepauled")
.attr("opacity",0)
.attr("fill", "white");

pointsepauled.transition()
.attr("cx",function(d) { return x(d.V2); })
.attr("cy",function(d) { return y(d.V3); })
.attr("fill", "blue")
    .attr("opacity",1)
        .duration(33)
.delay(function(d) { return (d.V1); });

pointsepauled.transition()
.attr("cx",function(d) { return x(d.V2); })
.attr("cy",function(d) { return y(d.V3); })
    .attr("opacity",0)
.delay(function(d) { return (d.V1)+100; });

var pointsepauleg=canvas3.selectAll(".pointsepauleg") 
.data(eg)
  .enter().append("circle") 
.attr("cx",function(d) { return x(d.V2); })
.attr("cy",function(d) { return y(d.V3); })
.attr("r", 2)
.attr("class","pointsepauleg")
.attr("opacity",0)
.attr("fill", "white");

pointsepauleg.transition()
.attr("cx",function(d) { return x(d.V2); })
.attr("cy",function(d) { return y(d.V3); })
.attr("fill", "red")
    .attr("opacity",1)
        .duration(33)
.delay(function(d) { return (d.V1); });

pointsepauleg.transition()
.attr("cx",function(d) { return x(d.V2); })
.attr("cy",function(d) { return y(d.V3); })
    .attr("opacity",0)
.delay(function(d) { return (d.V1)+100; });

Answer 1

我找到了解决方案： 我将两个 csv 合并为一个，从一个 csv 中添加数组的每个对象所需的属性。

var epauledroite = ed;
var epaules = eg; 
var i, len = epaules.length;
for (i=0; i<len; i++){
epaules[i].abs=epauledroite[i].V2;
epaules[i].ord=epauledroite[i].V3;
}

然后画出肩膀之间的线：

var groups = canvas3.selectAll('.epaules')
.data(epaules)
.enter()
.append("line")
    .attr("x1", function(d) {return x(d.V2);})
    .attr("y1", function(d) {return y(d.V3);})
    .attr("x2", function(d) {return x(d.abs);})
    .attr("y2", function(d) {return y(d.ord);})
.style("stroke", "white")
.attr("class", "epaules")
.attr("opacity",0)
.style("stroke-width", 2);

我要感谢来自The Coding Tutorials 的 Andrew 的帮助。