Javascript 无法在d3 force布局中的节点上显示文本
我无法在节点顶部显示文本。文本将显示在节点下方 确切地说，节点正在隐藏我的测试 我的代码如下Javascript 无法在d3 force布局中的节点上显示文本,javascript,html,css,d3.js,svg,Javascript,Html,Css,D3.js,Svg,我无法在节点顶部显示文本。文本将显示在节点下方 确切地说，节点正在隐藏我的测试 我的代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../D3/d3.min.js"></script> </head> <body> <style> body {
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../D3/d3.min.js"></script>
</head>
<body>
<style>
body {
background-color: gray;
}
</style>
<script type="text/javascript">
var width = 1400,
height = 800;
color = d3.scale.category10();
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("oncontextmenu", "return false;");
svg.append("svg:defs")
.selectAll("marker")
.data(["end"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
var nodes =
[
{
"id": "Component",
"description": "Component are the Containers",
"type": "wiring"
},
{
"id": "Form Design And Data Design",
"description": "In the Form Design and Data Design we can create form and data",
"type": "wiring"
},
{
"id": "Data and Property ",
"description": "All the Data has the Property and value Associated with It",
"type": "wiring"
},
{
"id": "Entity Query",
"description": "Entity Queries can be used to create Entity Relationship ",
"type": "wiring"
},
{
"id": "Entity Query and Entity Data",
"description": "Entity Data Can be used to create ",
"type": "wiring"
}
]
var links = [
]
var texts = svg.selectAll(".text")
.data(nodes)
.enter()
.append("text")
.attr("x", 50)
.attr("y", 40)
.attr("fill","white")
.attr("font-family","sans-serif")
.attr("font-size","15px")
.text(function (d) { return d.id;});
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.linkDistance(250)
.charge(-1000)
.gravity(.1)
//.charge(-10 / k)
// .gravity(100 * k)
//.linkStrength(5)
.theta(1)
.alpha(3)
//.on('tick', tick)
.start();
var edges = svg.selectAll("line")
.data(links)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1)
.attr("marker-end", "url(#end)");
var nodes = svg.selectAll(".rect")
.data(nodes)
.enter()
.append("svg:rect")
.attr("width", 150)
.attr("height", 50)
.attr("rx", 10)
.attr("ry", 10)
.attr("x", 150)
.attr("y",160)
.style("fill", function(d,i) { return color(i); })
.call(force.drag);
force.on("tick", function()
{
edges.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
nodes.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
texts.attr("transform", function (d)
{
return "translate(" + d.x + "," + d.y + ")";
});
});
</script>
</body>
</html>
身体{
背景颜色：灰色；
}
可变宽度=1400，
高度=800；
颜色=d3.scale.category10（）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“oncontextmenu”，“return false；”）；
append（“svg:defs”）
.selectAll（“标记”）
.数据（[“结束”]）
.enter（）.append（“svg:marker”）
.attr（“id”，字符串）
.attr（“视图框”，“0-5 10”）
.attr（“参考文献”，第15页）
.attr（“参考文献”，-1.5）
.attr（“markerWidth”，6）
.attr（“markerHeight”，6）
.attr（“方向”、“自动”）
.append（“svg:path”）
.attr（“d”，“M0，-5L10,0L0,5”）；
变量节点=
[
{
“id”：“组件”，
“说明”：“组件是容器”，
“类型”：“接线”
},
{
“id”：“表单设计和数据设计”，
“说明”：“在表单设计和数据设计中，我们可以创建表单和数据”，
“类型”：“接线”
},
{
“id”：“数据和属性”，
“说明”：“所有数据都具有与其关联的属性和值”，
“类型”：“接线”
},
{
“id”：“实体查询”，
“说明”：“实体查询可用于创建实体关系”，
“类型”：“接线”
},
{
“id”：“实体查询和实体数据”，
“说明”：“实体数据可用于创建”，
“类型”：“接线”
}
]
变量链接=[
]
var text=svg.selectAll（“.text”）
.数据（节点）
.输入（）
.append（“文本”）
.attr（“x”，50）
.attr（“y”，40）
.attr（“填充”、“白色”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“15px”）
.text（函数（d）{返回d.id；}）；
var-force=d3.layout.force（）
.节点（节点）
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（250）
。收费（-1000）
重力（.1）
//。收费（-10/k）
//.重力（100*k）
//.联系强度（5）
.θ（1）
.alpha（3）
//.on（'tick'，tick）
.start（）；
var edges=svg.selectAll（“行”）
.数据（链接）
.输入（）
.附加（“行”）
.style（“笔划”，“#ccc”）
.style（“笔划宽度”，1）
.attr（“标记结束”、“url（#结束）”）；
var nodes=svg.selectAll（“.rect”）
.数据（节点）
.输入（）
.append（“svg:rect”）
.attr（“宽度”，150）
.attr（“高度”，50）
.attr（“rx”，10）
.attr（“ry”，10）
.attr（“x”，150）
.attr（“y”，160）
.style（“填充”，函数（d，i）{返回颜色（i）；}）
.呼叫（强制拖动）；
force.on（“勾号”，函数（）
{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）
text.attr（“转换”，函数（d）
{
返回“translate”（“+d.x+”，“+d.y+”）；
});
});
SVG使用画师模型，因此文件中后面的对象将绘制在文件中前面的对象之上。就像画家将早期内容与后期内容重叠绘制一样。将文本创建移动到文件中的后期，即节点创建之后
SVG使用画师模型，因此文件中后面的对象将绘制在文件中前面的对象之上。就像画家将早期的事物与后期的事物重叠绘制一样。首先将var节点重命名为nodesdata
var nodesdata =
[
{
"id": "Component",
"description": "Component are the Containers",
"type": "wiring"
},
{
"id": "Form Design And Data Design",
"description": "In the Form Design and Data Design we can create form and data",
"type": "wiring"
},
{
"id": "Data and Property ",
"description": "All the Data has the Property and value Associated with It",
"type": "wiring"
},
{
"id": "Entity Query",
"description": "Entity Queries can be used to create Entity Relationship ",
"type": "wiring"
},
{
"id": "Entity Query and Entity Data",
"description": "Entity Data Can be used to create ",
"type": "wiring"
}
]
var nodes = svg.selectAll(".rect")
.data(nodesdata)
var texts = svg.selectAll(".text")
.data(nodesdata)
.enter()
.append("text")
.attr("x", 50)
.attr("y", 40)
.attr("fill","white")
.attr("font-family","sans-serif")
.attr("font-size","15px")
.text(function (d) { return d.id;});
工作代码首先将var节点重命名为nodesdata
var nodesdata =
[
{
"id": "Component",
"description": "Component are the Containers",
"type": "wiring"
},
{
"id": "Form Design And Data Design",
"description": "In the Form Design and Data Design we can create form and data",
"type": "wiring"
},
{
"id": "Data and Property ",
"description": "All the Data has the Property and value Associated with It",
"type": "wiring"
},
{
"id": "Entity Query",
"description": "Entity Queries can be used to create Entity Relationship ",
"type": "wiring"
},
{
"id": "Entity Query and Entity Data",
"description": "Entity Data Can be used to create ",
"type": "wiring"
}
]
var nodes = svg.selectAll(".rect")
.data(nodesdata)
var texts = svg.selectAll(".text")
.data(nodesdata)
.enter()
.append("text")
.attr("x", 50)
.attr("y", 40)
.attr("fill","white")
.attr("font-family","sans-serif")
.attr("font-size","15px")
.text(function (d) { return d.id;});
工作代码很有效..非常感谢Cyril…你能告诉我我的代码有什么错误吗..只是为了避免将来的错误..问题是在SVG中没有zindex，所以要在节点上显示文本，我们首先创建节点或圆，然后创建文本，因此，文本将出现在节点的顶部。这对我来说真的解释了很多，作为D3.js中的新手…再次非常感谢…如果我有任何疑问，我会再打给你…如果你不，I don’我不介意你能告诉我如何启动聊天过程吗？…堆栈溢出中…嗨，西里尔..我还有一个问题..很抱歉，我不能再问另一个问题，因为我的提问被阻止了4天..所以我通过评论提问..可以吗