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

我是d3.js的新手，正在尝试从视频中获取的点创建一个棒状图形。 对于每个csv，我有时间（V1）、宽度（V2）和高度（V3）。每个csv包含主体成员的数据

目前，我已经成功地展示了每个成员的动作，但在创建两个肩膀之间的链接时，我被卡住了

这是我的密码

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

我找到了一个解决方案： 我将两个csv合并到一个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;
}

---

我必须感谢来自的安德鲁对我的帮助。

你有一个我们可以解决的问题吗？对不起，最后一个问题不好。（虽然我在复制这一个时似乎遗漏了一些东西…）我不明白为什么JSFIDLE不能工作。下面是我网站上的一个工作示例。在你的小提琴上，你没有包括D3的外部链接。所以它不知道如何使用你的代码。干杯。谢谢你。我已经包括了它，但它似乎没有变得更好：

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