【独家发布】画一张2020年度出口目的国的voronoiTree图

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

原数据： export2020.rar (2.73 KB) 本附件包括：

• export2020.csv

2021-2-17 12:23:38 上传

海关总署2020年出口目的国数据

之前论坛里提到了voronoiTree图，R的voronoiTreemap包可以调用d3.js在浏览器中呈现。

问题是，这个包过于简单，d3的很多参数无法设置，比如说字体、字号、位置、颜色……，导致图的label只显示名称不显示数据，图例位置尴尬。

当然这个图，对于熟悉js的同学很容易，只要利用d3.js直接写代码就可以了。

这里还是用R的voronoiTreemap包，看看如何让图更好看一些。

最终的图是这样的：


第一步：三行代码画出原始图

1. #voronoiTree图
   
2. library(voronoiTreemap)
   
3. 
   
4. pop<-read.csv("popvoronoi.csv",header=T,stringsAsFactors = F)
   
5. 
   
6. vt_d3(vt_export_json(vt_input_from_df(pop)),
   
7. legend=TRUE,
   
8. size_circle = "5px",
   
9. size_border = "2px",
   
10. size_border_hover = "5px")

复制代码

第二步：
在 firefox 中打开上面作出的图，发现过于简单，也不好看。
按ctrl+shift+I，打开开发者功能，在查看器里可以直接修改js代码。
1、找到legend，可以修改transform的参数，可以调整图例的位置。
2、通过搜索功能，找到label，同样修改整体的transform参数，可以调整所有标签的位置，原始图的标签位置偏了很多。
3、找到要修改的标签，比如说阿联酋，修改这个标签的transform参数，可以单独调整标签位置。
4、对特定的标签，找到后，可以修改text内容，比如说增加显示数据，也可以修改style参数，调整字号、颜色。
5、增加一些js代码，可以在原始图中增加，比如图的标题，原始图没做，可以在代码中增加一个title并设置相应参数即可。


这样，我们就不用耗费时间去研究d3.js了。

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Tree NOI Library BRARY label voronoiTreemap 出口目的国

不错 谢谢

赞！厉害了！一般具体成图后的细节，我选择在AI或者Acrobat里调整，所见即所得，不是重复批量的工作，用代码还是不划算

zerofung 发表于 2021-2-17 20:05
赞！厉害了！一般具体成图后的细节，我选择在AI或者Acrobat里调整，所见即所得，不是重复批量的工作，用代码 ...

因为生成的是网页内容，所以想点办法在网页上修改，图仍然是可以稍微互动的。
如果是用在文档中，如您所述用AI最好，可以很方便调整，而且可以保证出图质量。

llb_321 发表于 2021-2-17 20:24
因为生成的是网页内容，所以想点办法在网页上修改，图仍然是可以稍微互动的。
如果是用在文档中，如您所 ...

哈哈原来如此

llb_321 发表于 2021-2-17 12:38
原数据：

之前论坛里提到了voronoiTree图，R的voronoiTreemap包可以调用d3.js在浏览器中呈现。

好的好的好的

llb_321 发表于 2021-2-17 12:38
原数据：

之前论坛里提到了voronoiTree图，R的voronoiTreemap包可以调用d3.js在浏览器中呈现。

好贴

lib_321老师

nieqiang110 发表于 2021-2-23 12:45
lib_321老师

我真的不是老师，更不敢以老师自居。讨论而已。