- export2020.csv
之前论坛里提到了voronoiTree图,R的voronoiTreemap包可以调用d3.js在浏览器中呈现。
问题是,这个包过于简单,d3的很多参数无法设置,比如说字体、字号、位置、颜色……,导致图的label只显示名称不显示数据,图例位置尴尬。
当然这个图,对于熟悉js的同学很容易,只要利用d3.js直接写代码就可以了。
这里还是用R的voronoiTreemap包,看看如何让图更好看一些。
最终的图是这样的:
第一步:三行代码画出原始图
- #voronoiTree图
- library(voronoiTreemap)
- pop<-read.csv("popvoronoi.csv",header=T,stringsAsFactors = F)
- vt_d3(vt_export_json(vt_input_from_df(pop)),
- legend=TRUE,
- size_circle = "5px",
- size_border = "2px",
- 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了。