D3.js svg.diagonal 问题
D3.js svg.diagonal issue
我有这个小问题:我无法使用 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})
我在控制台中遇到错误,无法绘制线条
你知道我的错误在哪里吗?
我的数据是这样的
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"}
];
我认为源函数的语法有误,而且数据已经是一个数组,也许这行得通?
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");
我有这个小问题:我无法使用 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})
我在控制台中遇到错误,无法绘制线条
你知道我的错误在哪里吗?
我的数据是这样的
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"}
];
我认为源函数的语法有误,而且数据已经是一个数组,也许这行得通?
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");