D3.js svg.diagonal問題

Question

我有這個小問題：我無法用json數據繪製曲線。

這裏是去我的代碼

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

在這裏，我把一些數據，但是當我用

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

嘗試我在控制檯habve錯誤，我不能夠繪製線條

你知道我的錯誤在哪裏嗎？

我的數據是這樣的

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

Answer 1

我認爲你有語法錯誤的源功能，以及作爲一個數組中的數據已經，也許這將工作？

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