d3_v7.js绘制词云图

已于 2022-12-22 00:37:26 修改
阅读量992 收藏 4
点赞数 1
分类专栏： 前端 文章标签： javascript 前端 html
于 2022-12-21 19:11:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62268437/article/details/128400866
版权

json文件

[
    {
        "year": "2008",
        "directors": [
            {
                "text": "张建亚 Jianya Zhang",
                "size": "3"
            },
            {
                "text": "徐克 Hark Tsui",
                "size": "2"
            },
            {
                "text": "林超贤 Dante Lam",
                "size": "2"
            },
            {
                "text": "马俪文 Liwen Ma",
                "size": "2"
            },
            {
                "text": "马楚成 Jingle Ma",
                "size": "2"
            },
            {
                "text": "Gehe Zhuo",
                "size": "1"
            },
            {
                "text": "Robert Vicencio",
                "size": "1"
            },
            {
                "text": "丁晟 Sheng Ding",
                "size": "1"
            },
            {
                "text": "乔粱 Liang Qiao",
                "size": "1"
            },
            {
                "text": "侯咏 Yong Hou",
                "size": "1"
            }
        ]
    },
    {
        "year": "2009",
        "directors": [
            {
                "text": "Mingkai Hu邓衍成 Billy Tang",
                "size": "3"
            },
            {
                "text": "王晶 Jing Wong",
                "size": "2"
            },
            {
                "text": "管虎 Hu Guan",
                "size": "2"
            },
            {
                "text": "Shimon Dotan",
                "size": "1"
            },
            {
                "text": "Xiaobo Zhang",
                "size": "1"
            },
            {
                "text": "丁荫楠 Yinnan Ding",
                "size": "1"
            },
            {
                "text": "万玛才旦 Pema Tseden",
                "size": "1"
            },
            {
                "text": "书亚 Ya Shu高天 Tian Gao",
                "size": "1"
            },
            {
                "text": "何平 Ping He",
                "size": "1"
            },
            {
                "text": "佛罗瑞·加仑伯格 Florian Gallenberger",
                "size": "1"
            }
        ]
    },
    {
        "year": "2010",
        "directors": [
            {
                "text": "阿甘 Agan",
                "size": "3"
            },
            {
                "text": "Mingkai Hu",
                "size": "2"
            },
            {
                "text": "冯小刚 Xiaogang Feng",
                "size": "2"
            },
            {
                "text": "刘镇伟 Jeffrey Lau",
                "size": "2"
            },
            {
                "text": "宁瀛 Ying Ning",
                "size": "2"
            },
            {
                "text": "林超贤 Dante Lam",
                "size": "2"
            },
            {
                "text": "王晶 Jing Wong",
                "size": "2"
            },
            {
                "text": "Xinyi Liu",
                "size": "1"
            },
            {
                "text": "丁晟 Sheng Ding",
                "size": "1"
            },
            {
                "text": "余乐 Le Yu",
                "size": "1"
            }
        ]
    },
    {
        "year": "2011",
        "directors": [
            {
                "text": "叶伟信 Wilson Yip",
                "size": "2"
            },
            {
                "text": "彭顺 Oxide Pang Chun",
                "size": "2"
            },
            {
                "text": "闫然 Ran Yan",
                "size": "2"
            },
            {
                "text": "陈力 Li Chen",
                "size": "2"
            },
            {
                "text": "马楚成 Jingle Ma",
                "size": "2"
            },
            {
                "text": "麦兆辉 Alan Mak庄文强 Felix Chong",
                "size": "2"
            },
            {
                "text": "Dahang Wei",
                "size": "1"
            },
            {
                "text": "Wayne Wang",
                "size": "1"
            },
            {
                "text": "丁小明 Xiaoming Ding",
                "size": "1"
            },
            {
                "text": "丁晟 Sheng Ding赵海城 Haicheng Zhao",
                "size": "1"
            }
        ]
    },
    {
        "year": "2012",
        "directors": [
            {
                "text": "潘镜丞 Jingcheng Pan",
                "size": "3"
            },
            {
                "text": "冯德伦 Stephen Fung",
                "size": "2"
            },
            {
                "text": "卢卫国 Weiguo Lu",
                "size": "2"
            },
            {
                "text": "叶伟民 Waiman Yip",
                "size": "2"
            },
            {
                "text": "周耀武 Yaowu Zhou",
                "size": "2"
            },
            {
                "text": "安战军 Zhanjun An",
                "size": "2"
            },
            {
                "text": "安澜 Lan An",
                "size": "2"
            },
            {
                "text": "李克龙 Kelong Li",
                "size": "2"
            },
            {
                "text": "杨子 Larry Yang",
                "size": "2"
            },
            {
                "text": "王晶 Jing Wong",
                "size": "2"
            }
        ]
    },
    {
        "year": "2013",
        "directors": [
            {
                "text": "Yanting Li",
                "size": "2"
            },
            {
                "text": "傅华阳 Huayang Fu",
                "size": "2"
            },
            {
                "text": "关尔 Er Guan",
                "size": "2"
            },
            {
                "text": "刘一君 Yijun Liu",
                "size": "2"
            },
            {
                "text": "宁敬武 Ning Jingwu",
                "size": "2"
            },
            {
                "text": "宁海强 Haiqiang Ning",
                "size": "2"
            },
            {
                "text": "张力 Li Zhang",
                "size": "2"
            },
            {
                "text": "徐克 Xu Ke",
                "size": "2"
            },
            {
                "text": "杜琪峰 Johnnie To",
                "size": "2"
            },
            {
                "text": "杜鹏 Peng Du",
                "size": "2"
            }
        ]
    },
    {
        "year": "2014",
        "directors": [
            {
                "text": "刘镇伟 Jeffrey Lau",
                "size": "4"
            },
            {
                "text": "马雍 Yong Ma",
                "size": "3"
            },
            {
                "text": "刘宁 Ning Liu",
                "size": "2"
            },
            {
                "text": "彭浩翔 Ho-Cheung Pang",
                "size": "2"
            },
            {
                "text": "朱赵伟 Zhaowei Zhu",
                "size": "2"
            },
            {
                "text": "林晓丽 Lin Xiaoli",
                "size": "2"
            },
            {
                "text": "欧阳奋强 Fenqiang Ouyang",
                "size": "2"
            },
            {
                "text": "沈乐平 ChenLeBeng",
                "size": "2"
            },
            {
                "text": "袁杰 Jie Yuan",
                "size": "2"
            },
            {
                "text": "路阳 Yang Lu",
                "size": "2"
            }
        ]
    },
    {
        "year": "2015",
        "directors": [
            {
                "text": "海涛 Tao Hai",
                "size": "6"
            },
            {
                "text": "宁敬武 Ning Jingwu",
                "size": "3"
            },
            {
                "text": "Tao Li",
                "size": "2"
            },
            {
                "text": "叶念琛 Patrick Kong",
                "size": "2"
            },
            {
                "text": "安澜 Lan An",
                "size": "2"
            },
            {
                "text": "张艺飞 Yifei Zhang",
                "size": "2"
            },
            {
                "text": "彭发 Danny Pang",
                "size": "2"
            },
            {
                "text": "徐正超 ZhengChao Xu",
                "size": "2"
            },
            {
                "text": "朱赵伟 Zhaowei Zhu",
                "size": "2"
            },
            {
                "text": "李凯 Kai Li",
                "size": "2"
            }
        ]
    },
    {
        "year": "2016",
        "directors": [
            {
                "text": "赵小溪 Xiaoxi Zhao",
                "size": "3"
            },
            {
                "text": "黄军 Jun Huang",
                "size": "3"
            },
            {
                "text": "周晓鹏 Xiaopeng Zhou",
                "size": "2"
            },
            {
                "text": "崔志敏 Zhimin Cui",
                "size": "2"
            },
            {
                "text": "摩撒利 Sa-li Mo",
                "size": "2"
            },
            {
                "text": "程中豪 Zhonghao Cheng王凯 Kai Wang",
                "size": "2"
            },
            {
                "text": "郑成峰 Chengfeng Zheng",
                "size": "2"
            },
            {
                "text": "郭大雷 Zorro",
                "size": "2"
            },
            {
                "text": "马宁 Ning Ma",
                "size": "2"
            },
            {
                "text": "高峰 Feng Gao",
                "size": "2"
            }
        ]
    },
    {
        "year": "2017",
        "directors": [
            {
                "text": "陆诗雷 Shilei Lu",
                "size": "4"
            },
            {
                "text": "朱江华 Jianghua Zhu",
                "size": "3"
            },
            {
                "text": "王良 Liang Wang",
                "size": "3"
            },
            {
                "text": "刘艳杰 Yanjie Liu",
                "size": "2"
            },
            {
                "text": "刘镇伟 Jeffrey Lau",
                "size": "2"
            },
            {
                "text": "夏钢 Gang Xia",
                "size": "2"
            },
            {
                "text": "张杨 Yang Zhang",
                "size": "2"
            },
            {
                "text": "张艺飞 Yifei Zhang",
                "size": "2"
            },
            {
                "text": "徐艺华 Yihua Xu",
                "size": "2"
            },
            {
                "text": "王择谚 Ze-yan Wang",
                "size": "2"
            }
        ]
    },
    {
        "year": "2018",
        "directors": [
            {
                "text": "刘江 Jiang Liu",
                "size": "2"
            },
            {
                "text": "张艺谋 Yimou Zhang",
                "size": "2"
            },
            {
                "text": "徐超 Chao Xu",
                "size": "2"
            },
            {
                "text": "朱丹 Dan Zhu",
                "size": "2"
            },
            {
                "text": "袁晓满 Xiaoman Yuan",
                "size": "2"
            },
            {
                "text": "赵宝刚 Baogang Zhao王迎 Ying Wang",
                "size": "2"
            },
            {
                "text": "陈设 Chen She",
                "size": "2"
            },
            {
                "text": "Zhangxiang Zhao",
                "size": "1"
            },
            {
                "text": "丁亮 Liang Ding林汇达 Huida Lin",
                "size": "1"
            },
            {
                "text": "丁仕昀 Shiyun Ding",
                "size": "1"
            }
        ]
    }
]

代码部分

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>WordcloudLayout</title>
    <script type='text/javascript' src='js/d3_v7.js'></script>
    <script src='js/d3.layout.cloud.js'></script>
</head>

<body>
    <script type='text/javascript'>
        function  updateDraw(year,flat) {
            d3.json('js/词云.json').then(function (data) {
                if(flat==true)  d3.select("body").select("svg").remove();//更新词云图
                let svg = d3.select('body').append('svg').attr("width", 500).attr("height", 500)
                let fill = d3.scaleOrdinal(d3.schemeCategory10)
                let layout = d3.layout.cloud() //注意，这不是D3自带的API，是d3.layout.cloud.js中的API
                    .size([500, 500])
                    .words(data[year-2008]["directors"])
                    .padding(5) //每个词之间的间隔，不设置时默认为0
                    .rotate(function () {
                        return ~(Math.random() * 90)
                    })
                    .font('Impact')
                    .fontSize(d => d.size * 15)
                    .on('end', draw)

                let wordcloudGroup = svg.append('g')
                    .attr('transform', `translate(${layout.size()[0] / 2} ,${layout.size()[1] / 2})`)

                layout.start()

                function draw(words) {
                    wordcloudGroup.selectAll('text')
                        .data(words)
                        .enter().append('text')
                        .attr('font-size', d => `${d.size}px`)
                        .attr('font-family', 'Impact')
                        .attr('fill', (d, i) => fill(i))
                        .attr('text-anchor', 'middle')
                        .attr('transform', d => `translate(${d.x}, ${d.y}) rotate(${d.rotate})`)
                        .text(d => d.text)
                }
                
            })
        }
        updateDraw(2008,false)//开始默认为2008年的词云图

        function myChoice(year)
        {
            updateDraw(year,true)
        }
        // myChoice(2011)
    </script>
</body>

</html>

效果展示

詹小友
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
词云 js2wordcloud.js
钟健的博客
06-02 7万+
词云 一、简介 “词云”拼音是cí yún，由美国西北大学新闻学副教授、新媒体专业主任里奇·戈登（Rich Gordon）于2006年最先使用。戈登做过编辑、记者，曾担任迈阿密先驱报（Miami Herald）新媒体版的主任。他一直很关注网络内容发布的最新形式——即那些只有互联网可以采用而报纸、广播、电视等其它媒体都望尘莫及的传播方式。通常，这些最新的、最适合网络的传播方式，也是最好的传播方式。 因此，“词云”就是通过形成“关键词云层”或“关键词渲染”，对网络文本中出现频率较高的“关键词”的视觉上的突出。
Echarts数据可视化 第4章 Echarts可视化图 4.13 词云图
谢谢你们的关注
03-18 1743
Echarts数据可视化 第4章 Echarts可视化图 4.13 词云图
ECharts 数据可视化 --词云图
最新发布
wqqstudy的博客
05-14 1117
利用2019年10月全球编程语言的TIOBE排名数据展现其中的文本信息 ECharts 数据可视化 --词云图
【VUE】VUE项目中使用Js2WordCloud实现自定义形状的词云图效果
EchoooZhang的博客
03-10 3959
【VUE】VUE中词云图实现(Js2WordCloud 词云安装用法) 词云图一直用echarts和D3，昨天想在Vue里用一下，发现echarts-cloud的词云好像不太支持，Echarts官网里的词云DEMO也显示不出。办法总比问题多，懒惰让我放弃研究，直接用了以前用过的Js2WordCloud，在VUE里实现了下，其实比较强推这个，我觉得他的可以自定义Imagemask和可以设置时间慢慢渲...
词云（wordcloud2.js js2wordcloud.js）
weixin_30606669的博客
07-06 1267
npm安装： npminstalljs2wordcloud--save 用法 varwc=newJs2WordCloud(document.getElementById('container')) wc.setOption({ tooltip:{ show:true }, list:[['谈笑风生',80],...
词云解决方案：js2wordcloud
前端挖掘机
04-18 4759
JavaScript生成词云图。基于wordcloud2.js GitHub传送门：Js2WordCloud Installation： 通过script标签引入： <script src="dist/js2wordcloud.min.js"></script> npm安装： npm install js2wordcloud --save Usage： v...
d3.v7.min.js
12-08
D3.js v7
d3.js 绘制心电图以及网格
03-09
d3.js 绘制心电图以及网格
jQuery + d3绘制流程图.zip_d3_d3.js 流程图_d3流程图_d3画流程图_jquery d3
09-19
"d3_d3.js_流程图"、"d3流程图"、"d3画流程图"都指向了使用d3.js进行流程图绘制的主题。这意味着我们可能会学习如何使用d3.select()、d3.append()、d3.transition()等方法来构建和操纵流程图元素。 在压缩包内的...
提示缺少D3Dcompiler_47.dll，win7-kb4019990补丁
09-21
标题“提示缺少D3Dcompiler_47.dll，win7-kb4019990补丁”指的是在运行某些应用程序时，系统提示缺少名为"D3Dcompiler_47.dll"的动态链接库文件，而这个问题可以通过安装Windows 7的KB4019990更新补丁来解决。...
d3dx9_39.dll、d3dx9_40.dll、d3dx9_41.dll、d3dx9_42.dll、d3dx9_43.dll、xinput1_3.dll
12-24
解决部分 应用程序无法正常启动0xc000007b问题，包含d3dx9_39.dll、d3dx9_40.dll、d3dx9_41.dll、d3dx9_42.dll、d3dx9_43.dll、xinput1_3.dll，
词云（标签云）demo
06-27
词云（标签云）demo 源码下载：http://down.alixixi.com 模板下载：http://mb.alixixi.com 电子书籍：http://book.alixixi.com 网页特效：http://js.alixixi.com 韩国酷站：http://cool.alixixi.com/ 技术论坛：http://bbs.alixixi.com
D3.js实现文字云效果 例子
11-01
这是一个用D3实现文字云的简单案例。可以参考，学习。如果存在不足的的地方可以优化，再跟大家分享，相互学习
Cloud5:HTML5 Canvas中的Javascript词云生成
05-10
云5 一个客户端Javascript库，用于使用HTML5 Canvas渲染词云。 特征： 完全呈现在客户端。 无需服务器调用。 字体和颜色自定义。 单词的鼠标事件。 易于扩展。 建造 需要 。 设置： npm install Cloud5使用gulp进行构建。 要将项目编译为dist/目录中的cloud5.js和cloud5.min.js ： gulp ####依赖关系 没有任何！ ####基本用法 var text = // A big long block of text as a string var cloud = new Cloud5 ( ) . canvas ( document . getElementById ( 'myCanvas' ) ) . width ( 800 ) . height ( 400 ) . text ( te
画等值线图、等高线图、等值云图
01-08
利用d3.js实现画等值线图、等值云图、等值云图的demo，浏览器直接运行即可，其中通过反距离加权法（IDW）先进性插值，后面再通过conrec.js这个工具类将等值线图所需的数据生成出来，之后再通过d3.js将等值线图、等值云图、等值云图画出来，同时还包含图例。
D3.js 生成词云图
a736755244的博客
12-18 5525
引入d3.js生成词云图
D3.js V5.0 词云图（标签云）
m0_37777005的博客
05-30 4783
#词云图 需要安装d3-cloud 插件。 https://www.npmjs.com/package/d3-cloud 实现代码如下： const width = 500; const height = 500; const color = d3.scaleOrdinal(d3.schemeCategory10); const svg = d3 .select(id) .append(‘svg’...
html+word+clou,d3.js – 用d3.wordcloud重绘文字云
weixin_39793794的博客
06-29 384
这有点棘手.d3-wordcloud插件(更确切地说是底层的d3.layout.cloud插件)将修改单词的输入数据集以适应单词的大小.一点一点地说某些词会越来越大,而其他词会越来越小.为避免这种情况,您可以在每次使用原始数据集的深层副本创建新云时提供插件.这样原始数据集始终保持不变：这是一种用javascript深度复制json的方法：function deepCopy(oldValue) {v...
Echarts词云图
weixin_43166729的博客
10-10 1999
Echarts词云图 下载 npm install echarts-wordcloud <template> <div> <p class="trave_title">{{title}}</p> <div :style="'width: 100%;'+'height:'+height+';'" :id="id"></div> </div> </template> <script&g
d3dx9_39.dll、d3dx9_40.dll、d3dx9_41.dll、d3dx9_42.dll、d3dx9_43.dll、xi
08-01
d3dx9_39.dll、d3dx9_40.dll、d3dx9_41.dll、d3dx9_42.dll、d3dx9_43.dll是DirectX的组件文件，用于支持计算机上运行DirectX相关程序或游戏所需的图形和音频功能。每个d3dx9_xx.dll文件对应不同版本的DirectX，在安装或运行DirectX程序时被调用。 这些文件的存在是为了提供更好的图形效果和音频效果，尤其是在游戏中，它们能够提供更流畅的游戏运行和更高的图形质量。如果计算机缺少这些文件，可能会导致无法正常运行或显示游戏、程序或应用程序。 而xi是一个缩写，通常指的是XInput，它是一个用于读取和处理输入设备（如游戏手柄或控制器）的Windows API。通过xi接口，游戏开发者可以从游戏手柄中读取输入数据，并使用这些数据来控制游戏角色或实现其他交互方式。与d3dx9_xx.dll文件一样，xi也是为了提供更好的游戏体验而存在的。 要解决缺少相关dll文件的问题，通常可以尝试以下几种方法：重新安装对应的程序或游戏，或者安装最新的DirectX版本。如果问题仍然存在，可能需要在Windows系统中进行修复或更新，以确保相关组件文件得到正确安装和配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

詹小友

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值