我想在我使用D3.js（我的图表）1建立的图表中为一些矩形附加一些文字。
这就是我的Json的样子：
{
"nodes":
[
{
"type":"projet",
"data":{
"id_projet":"50",
"nom_projet":"abrakadabra"
"objet_projet":"",
"these_projet":"0",
"resume_projet":"",
"role_imbe_projet":
"Partenaire":"",
"duree_projet":"24",
"montant_aide_projet":"103000",
"part_imbe_projet":"33342",
"cout_total_projet":"0",
"id_agent":"81",
"etat_projet":"2",
"archive_projet":"1",
"competitivite_projet":"0",
"previsionnel_projet":"",
"HM_permanent_projet":"0",
"HM_CDD_projet":"0",
"partenaire_projet":"help me please"
}
}
...
]
}
这是我的源代码：
function arbre(graph) { // graph is my Json file
var width = 1000,
height = 1000,
wrect=300,
hrect=400;
var color = d3.scale.category20();
var nodes=graph.nodes;
var root = nodes[0];
var stx=sty=50;
root.fixed = true;
root.x = 400;
root.y = 30;
//on ajoute les paramètre x2 et y2 au noeud
for(var key in nodes)
{
nodes[key].x2=wrect;
nodes[key].y2=hrect;
}
var force = d3.layout.force()
//.charge(-200) // -120 200
//.alpha(0);
.linkDistance(50) // 20 200
.gravity(0.5)
.charge(function(d, i) { return i ? 0 : -2000; })
.size([width, height]);
// définition des noeuds et des liens de la force
force.nodes(nodes)
.links(graph.links)
.start();
var svg = d3.select("#graph")
.append("svg")
.attr("width", width)
.attr("height", height);
// création des liens sous forme de lignes
var link = svg.selectAll(".link")
.data(graph.links)
.enter()
.append("g") // groupe pour les links
.attr("class","link-group")
.append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d); });
// création des nodes sous forme de rectangles
var node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class","node-group")
.append("rect")
.attr("class", "node")
.attr("width", wrect)
.attr("height", hrect)
.style("fill", function(d) { return color(d.data.id_projet); })
.attr("y", function(d) {if(d.type == 'convention') d.y = 300;})//return 300; })
.call(force.drag);
// Ajouter des infos au rectangles
var id = svg.selectAll(".node-group")
.data(graph.nodes)
.append("text")
.text(function(d) {if(d.type == 'projet')return d.data.id_projet; })
.attr("font-family", "sans-serif")
.attr("font-size", "10px");
var acronyme = svg.selectAll(".node-group")
.data(graph.nodes)
.append("text")
.text(function(d) {return d.data.acronyme_projet; })
.attr("font-family", "sans-serif")
.attr("font-size", "10px");
// la fonction tick
force.on("tick", function(e){
var q = d3.geom.quadtree(nodes),
i = -1,
n = nodes.length;
console.log(nodes);
// traitement de la collision des rectangles
while (++i < n)
{
q.visit(collide(nodes[i]));
}
// mise à jour des positions des rectangles et des lignes
node.attr("x", function(d) { return d.x; })
//.attr("y", function(d) { return d.y; });
.attr("y", function(d) {
if(d.type == "projet") return d.y;
if(d.type == "convention") return 300;
if(d.type == "budget") return 600;
});
console.log(nodes);
link.attr("x1", function(d) { return d.source.x+stx; }) // d: data() of links
.attr("y1", function(d) { return d.source.y+stx; })
.attr("x2", function(d) { return d.target.x+stx; })
.attr("y2", function(d) { return d.target.y+stx; });
// positionnement du text dans les rectangles
id.attr("x", function(d) { return d.x+2; }) // d: data() of texte
.attr("y", function(d) { return d.y+10; });
acronyme.attr("x", function(d) { return d.x+2; }) // d: data() of texte
.attr("y", function(d) { return d.y+20; });
});
});
// to avoid overlapping
function overlap(a, b){
if(((a.x < b.x && b.x < a.x2) && (a.y < b.y && b.y < a.y2)) || ((a.x < b.x2 && b.x2 < a.x2) && (a.y < b.y2 && b.y2 < a.y2)))
{
return true;
}
}
//-------------my collision function
function collide(node) {
node.x2=node.x+wrect;
node.y2=node.y+hrect;
var nx1, nx2, ny1, ny2, padding;
padding = 20;
nx1 = node.x - padding;
nx2 = node.x2 + padding;
ny1 = node.y - padding;
ny2 = node.y2 + padding;
console.log(node.x,node.x2,node.y,node.y2);
console.log(nx1, nx2, ny1, ny2, padding);
return function(quad, x1, y1, x2, y2) {
console.log(quad, x1, y1, x2, y2);
var dx, dy;
if (quad.point && (quad.point !== node)) {
if (overlap(node, quad.point)) {
console.log(node.x2,quad.point.x, quad.point.x2, node.x);
console.log(node.x2-quad.point.x, quad.point.x2 - node.x);
dx = Math.min(node.x2 - quad.point.x, quad.point.x2 - node.x) / 2;
node.x -= dx;
quad.point.x += dx;
dy = Math.min(node.y2 - quad.point.y, quad.point.y2 - node.y) / 2;
node.y -= dy;
quad.point.y += dy;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
};
};
}
在这段代码中，我可以轻松地使用“text”属性从我的Json获取数据。但我的问题是我不知道如何将我的Json的“数据”字段中的所有数据附加到矩形。我想说的是，有可能使用for循环或类似的东西来做，而不是每次我想要附加某些内容时都不使用“text”属性。
提前谢谢