您的位置：首页 > Web前端 > HTML

html中使用d3-cloud词云

2017-06-05 04:07 239 查看
在前端展示中有一个任务是将关键词以词云的形式展示出来，众所周知，网上由很多比较健全完善的使信息图表化的第三方资源库，今天我选择的使D3-CLOUD的词云功能，那么我们应该如何把词云运用到我们的系统当中去呢？

1.了解D3-Cloud

D3-Cloud是一个开源的词云实现，基于D3.js，使用HTML5 Canvas绘制输出，因为采用异步的方式处理，所以表现性能良好。

项目主页：https://www.jasondavies.com/wordcloud/

下载地址：https://github.com/jasondavies/d3-cloud

2.关于D3-Cloud的使用

2.1首先需要在HTML文件的<head>标签中导入d3.js和d3.layout.cloud.js两个js文件

<head>
<meta charset="UTF-8">
<title></title>
<script src="d3.min.js"></script>
<script src="d3.layout.cloud.js"></script>
</head>

2.2其次在<body>中对所要绘制的词云的具体属性进行设置

当然，需要在网页中先加入<canvas>标签，才能成功添加词云。

注释中包含了对大多数常用属性的注释和解说。

<script src="node.js" ></script>
<canvas ></canvas>

<script type="text/javascript">
var fill = d3.scale.category20();
//输出20种类别的颜色 ---颜色比例尺
//word cloud layout  词云布局，d3布局中为词云设立的单独的一种布局方式
//d3.layout.cloud() 构造一个词云的布局实例
//on(type,listener) 注册特定的listener来接收布局中特定类型的event。
//目前只有 word和end这两种event是被支持的。
//word这种event在该布局完成对每一个word的布局时被调度。
//end这种活动在改布局完成对所有的words的布局时被调度。
//注册的listener通过两个参数被调度：
//被成功布局的单词数组
//以[{x0,y0},{x1,y1}]形式为界限，代表words范围    a bounds object of the form [{x0, y0}, {x1, y1}] representing the extent of the placed objects.
    //
    //start 布局算法   初始化单词数组上的各种参数，并且从最大的单词开始布局单词，
//从矩形区域的中间开始，每一个单词在布局时都要检测是否与先前已经布局好的单词位置冲突。
//一旦检测到冲突，该算法会沿着螺旋线重新布局该单词。
//如果一个单词不能在沿着螺旋线的任何地方被布局，该单词最终将不会显示在词云图上，该问题可能在后续版本中被解决。
//stop() 停止布局算法
// timeInterval([time])   布局时通过setInterval来避免浏览器的event loop被锁住。
//words([words array].map(function(d)(return{text:d;size:某一个数值}))
    //为words数组中的每一个word分配一个字体大小
d3.layout.cloud().size([300, 300]) //size([x,y])  词云显示的大小
//map 返回新的object数组
.words([".NET", "Silverlight", "jQuery", "CSS3", "HTML5", "JavaScript", "SQL","C#"].map(function(d) {
return {"text": d, "size": 10 + Math.random() * 50};
}))
//~~的作用是单纯的去掉小数部分，不论正负都不会改变整数部分
//这里的作用是产生0 1
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)//结束时运行draw函数
.start();
//append()使用函数在指定元素的结尾添加内容
//transform:translate(x,y) 定义2d旋转，即平移，向右平移x,向下平移y
function draw(words) {
d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 400)
.attr("style","border:1px solid red")
.append("g")
.attr("transform", "translate(150,150)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("border","1px solid blue")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })//fill 在前面15行定义为颜色集
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}

</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 d3 词云
相关文章推荐
新的分享
章节导航