資料視覺化 D3.js實現力導向圖之二(node帶文字說明和提示)
從官方下載下的demo,直接加text帶文字,始終未能顯示出來,但是title卻能顯示出來,最後經過與網上其他地方做出來的例子用firebug進行跟蹤對比,發現能夠正確顯示title的html裡邊g標籤為node裡邊包含circle和text(circle、title和text是平級的),而官方下載下來的demo裡邊circle包含著text和title,於是把append(“circle”)移到 call(force.drag);之後,用node直接append(“circle”),這樣就能正確的顯示出text來了(text和circle也是平級的了).
程式碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style>
/*
.node {
stroke: #ffffff;
stroke-width: 0.1px;
}
*/
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script src="d3.min.js"></script>
<script>
var width = 960,
height = 500;
var colors = d3.scale.category20();
var force = d3.layout.force()
.charge(-320)
.linkDistance(100)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("miserables1.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.on("tick", tick)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", 10)
.style("fill", function(d) { return colors(d.group); });
node.append("title")
.text(function(d) { return d.name});
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
/*force.on("tick", function() {
link.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; });
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});*/
function tick() {//打點更新座標
link
.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; });
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
});
</script>
</body>
</html>
=================json測試資料================================
{
"nodes":[
{"name":"11","group":1},
{"name":"12","group":2},
{"name":"21","group":3},
{"name":"22","group":4},
{"name":"23","group":5}
],
"links":[
{"source":1,"target":2,"value":1},
{"source":1,"target":3,"value":1}
]
}