Недопустимое значение для атрибута <path> с использованием существующих объектов

Question

У меня есть набор данных, содержащий совпадения между победителями и проигравшими. Я хотел бы связать их обоих с использованием изогнутой диагонали, но я получаю сообщение об ошибке для своего пути. Однако, когда я печатаю свои значения x & y на консоли, я получаю соответствующие значения. Может ли кто-нибудь помочь мне узнать, что я делаю неправильно?

arcs.append("path") 
       .attr("class", function(data){ 
           return "arc" + " " + data["winner"] + " " + data["loser"] + " " + data["game"]}) 
       .attr("stroke-width", 2) 
       .attr("stroke", "green") 
       .attr("d", 
        function(data) { 
          console.log("winner x: " + document.getElementById(data.winner).cx.animVal.value); 
          console.log("winner y: " + document.getElementById(data.winner).cy.animVal.value); 
          console.log("loser x: " + document.getElementById(data.loser).cx.animVal.value); 
          console.log("loser y: " + document.getElementById(data.loser).cy.animVal.value); 
          return d3.svg.diagonal() 
           .source({ "x":document.getElementById(data.winner).cx.animVal.value, 
              "y":document.getElementById(data.winner).cy.animVal.value}) 
           .target({ "x":document.getElementById(data.loser).cx.animVal.value, 
              "y":document.getElementById(data.loser).cy.animVal.value}) 
           .projection(function(d) { return [document.getElementById(data.winner).cx.animVal.value, document.getElementById(data.winner).cy.animVal.value]}) 
           }); 

В результате я получаю в моей консоли следующего:

Error: Invalid value for <path> attribute d="function n(n,u){var i=t.call(this,n,u),a=e.call(this,n,u),o=(i.y+a.y)/2,l=[i,{x:i.x,y:o},{x:a.x,y:o},a];return l=l.map(r),\"M\"+l[0]+\"C\"+l[1]+\" \"+l[2]+\" \"+l[3]}" 
winner x: 442.55999755859375 
winner y: 370 
loser x: 409.77777099609375 
loser y: 470 

Answer 1

Благодаря JSBob, я был в состоянии решить эту проблему следующим образом:

var diagonal = d3.svg.diagonal() 
          .source(function(data) { return { "x":document.getElementById(data.winner).cx.animVal.value, 
                   "y":document.getElementById(data.winner).cy.animVal.value}; }) 
          .target(function(data) { return { "x":document.getElementById(data.loser).cx.animVal.value, 
                   "y":document.getElementById(data.loser).cy.animVal.value}; }) 
          //.projection(function(data) { return [document.getElementById(data.winner).cx.animVal.value, document.getElementById(data.winner).cy.animVal.value]}) 

    arcs.append("path") 
       .attr("class", function(data){ 
           return "arc" + " " + data["winner"] + " " + data["loser"] + " " + data["game"]}) 
       .attr("stroke-width", 2) 
       .attr("stroke", "green") 
       .attr("d", diagonal);