我无法在节点顶部显示文本。文本改为显示在节点下方。
准确地说，节点隐藏了我的测试。
我的代码如下.....
<!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>
最佳答案
将文本创建移到文件的后面，即在节点创建之后。
SVG 使用画家模型，因此文件中后面的对象绘制在文件中前面的对象之上。就像一个画家用后来的东西覆盖早期的东西。
关于javascript - 无法在 d3 强制布局中的节点上显示文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35286708/