CODEWITHSUNDEEP
d3.jspathdiagonal
Tankske
Tankske

Reputation: 95

Invalid value for <path> attribute using existing objects

I have a data set containing matches between winners and losers. I would like to connect both of them using a curved diagonal but I'm getting an error for my path. However, when I print my x & y values to the console, I get the corresponding values. Could anyone help me find out what I do wrong?

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

The result I get in my console is the following:

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

Upvotes: 0

Views: 29

Answers (1)

Tankske
Tankske

Reputation: 95

Thanks to JSBob, I was able to work this out as follows:

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

Upvotes: 1

Related Questions