文本未在forcelayout d3js中显示，但在视图中显示 [英] text not showing in forcelayout d3js but present in view
问题描述
从Web检查器查看时，文本在源中可见，但在实际图形上不可见
text is visible in source when viewed from web inspector but is not visible on real graph
<html>
<head>
<title>D3</title>
<script src="d3.min.js"> </script>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//Original data
var dataset = {
nodes: [
{ name: "Adam" },
{ name: "Bob" },
{ name: "Carrie" },
{ name: "Donovan" },
{ name: "Edward" },
{ name: "Felicity" },
{ name: "George" },
{ name: "Hannah" },
{ name: "Iris" },
{ name: "Jerry" }
],
edges: [
{ source: 0, target: 1 },
{ source: 0, target: 2 },
{ source: 0, target: 3 },
{ source: 0, target: 4 },
{ source: 1, target: 5 },
{ source: 2, target: 5 },
{ source: 2, target: 5 },
{ source: 3, target: 4 },
{ source: 5, target: 8 },
{ source: 5, target: 9 },
{ source: 6, target: 7 },
{ source: 7, target: 8 },
{ source: 8, target: 9 }
]
};
//Initialize a default force layout, using the nodes and edges in dataset
var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.size([w, h])
.linkDistance([50])
.charge([-100])
.start();
var colors = d3.scale.category10();
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create edges as lines
var edges = svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1);
//Create nodes as circles
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", function(d, i) {
return colors(i);
})
.call(force.drag);
//To display text
nodes.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d){ return d.name;
});
//Every time the simulation "ticks", this will be called
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("cx", function(d) { return d.x; })
// .attr("cy", function(d) { return d.y; });
nodes.attr("transform", function(d){
return "translate(" + d.x + "," + d.y + ")";
});
});
</script>
</body>
</html>
在这里，我遵循以下示例: http://bl.ocks.org/mbostock/2706022
here i am following this example: http://bl.ocks.org/mbostock/2706022
，并且还关注了这篇文章: D3.js，强制图，无法显示文本/节点标签
and also followed this post: D3.js, force-graph, cannot display text/label of nodes
这是此代码的jsfiddle: http://jsfiddle.net/devprashant/7kWwL/
Here is the jsfiddle for this code: http://jsfiddle.net/devprashant/7kWwL/
推荐答案
您遇到的问题是您当前的代码会将<text>附加到<circle>，但不会显示.相反，您需要为同时包含<circle> 和 <text>的每个节点创建一个组<g>.试试这个:
The problem you're having is that your current code is appending <text> to a <circle>, which won't show up. Instead, you need to create a group <g> for each node that contains both the <circle> and the <text>. Try this:
var nodes = svg.selectAll("g")
.data(dataset.nodes).enter()
.append("g");
nodes.append("circle")
.attr("r", 10)
.style("fill", function (d, i) { return colors(i); })
.call(force.drag);
nodes.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function (d) { return d.name; });
更新了JSFiddle 此处.
Updated JSFiddle here.
这篇关于文本未在forcelayout d3js中显示，但在视图中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
