数据可视化 D3.js实现力导向图之二(node带文字说明和提示)
来源:互联网 发布:java 编译器api 编辑:程序博客网 时间:2024/05/17 14:17
从官方下载下的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}
]
}
- 数据可视化 D3.js实现力导向图之二(node带文字说明和提示)
- 【D3.js数据可视化系列教程】(三十三)-- 力导向图之图片和提示
- D3.V3.js数据可视化 -- 力导向图之图片和提示
- 【D3.js数据可视化系列教程】(三十)--力导向图之带文字
- 数据可视化 D3.js实现力导向图之一(实现按指定字段确定link的source和target)
- 【D3.js数据可视化系列教程】(二十四)--力导向图
- 【D3.js数据可视化系列教程】(三十一)-- 力导向图之分子式
- 【D3.js数据可视化系列教程】(三十二)-- 力导向图之弧形箭头连线
- 【D3.js数据可视化系列教程】(二十二)--交互图表之提示条
- D3.js实现力导向图(Dray和Zoom)
- d3.js之力导向图
- 【D3.js数据可视化系列教程】(二十)--交互图表之条形图排序
- 【D3.js数据可视化系列教程】(二十一)--交互图表之条形图排序切换
- 【D3.js数据可视化系列教程】(二十八)--弦图
- 【D3.js数据可视化系列教程】(二十八)--弦图
- d3 力导向图
- 【D3.js数据可视化系列教程】(二十三)--饼图圆环图
- 【D3.js数据可视化系列教程】(三十四)-- sankey图
- Hibernate缓存机制
- linux解压 tar命令(总有人发广告我改成不允许评论了)
- universal image loader使用详解一
- 给Ubuntu 13.04换源 软件源、更新源
- 如何卸载eclipse中的ADT
- 数据可视化 D3.js实现力导向图之二(node带文字说明和提示)
- Codeforces Round #221 (Div. 2) B. I.O.U.
- ==, .equals(), compareTo(), and compare() (之一)
- This Android SDK requires Android Developer Toolkit version 20.0.0 or above
- 率失真优化的几篇论文
- 黑马程序员_1数据类型转换
- 如何完全卸载oracle
- 从郑大到北邮的心路历程
- 在使用MyEclipse新建文件时常常有些不需要的冗余代码可以采用如下方式进行更改