javascript - D3.js svg.diagonal issue -

i have little issue : i'm not able draw curved line json data.

here's go code

    var diagonal = d3.svg.diagonal(); groupe.selectall("path")     .data([data])     .enter()     .append("path")     .attr("d",diagonal         .source({x:250, y:500})         .target({x:400, y:300}))     .attr("fill", "none")     .attr("stroke", "#000")     .attr("stroke-width","2"); 

here put data, when try with

.source({'x':function(d) {return d.x},'y':function(d) {return d.x}) 

i habve error in console , i'm not able draw lines

do know error ?

my data looks this

var data = [     {"x":250,"y":500,"width": 100, "height": 100, "nx":400, "ny":300, "class":"brief", "name": "prise de brief"},     {"x":400,"y":300,"width": 150, "height": 150, "nx":600, "ny":450, "class":"conception", "name": "conception"},     {"x":600,"y":450,"width": 150, "height": 150, "nx":900, "ny":500, "xi":600,"yi":450,"wi": 50, "hi": 50, "xlink": "img/hexagone_plein.svg", "class":"crea", "name": "création graphique", "id": "crea"},     {"x":900,"y":500,"width": 150, "height": 150, "nx":1150, "ny":350, "class":"dev", "name": "développements techniques"},     {"x":1150,"y":350,"width": 100, "height": 100, "nx":1300, "ny":500, "class":"recette", "name": "recette"},     {"x":1300,"y":500,"width": 100, "height": 100, "nx":1500, "ny":650, "class":"mel", "name": "mise en ligne"},     {"x":1500,"y":650,"width": 100, "height": 100, "nx":1500, "ny":650, "class":"garantie", "name": "garantie"} ]; 

i think have syntax wrong source functions, data being array, maybe work?

var diagonal = d3.svg.diagonal();  groupe.selectall("path")   .data(data)   .enter()   .append("path")   .attr("d",diagonal       .source(function(d){ return {"x":d.x, "y":d.y};})       .target({x:400, y:300}))   .attr("fill", "none")   .attr("stroke", "#000")   .attr("stroke-width","2");