Question

我有一个包含赢家和输家之间匹配的数据集。我想用弯曲的对角线连接它们，但我的路径出错了。但是，当我打印我的x＆amp; 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);

使用现有对象的<path>属性的值无效

1 个答案: