内容來源：2017年5月20日，樂逗遊戲進階資料分析師在“第十屆中國r會議軟體工具專場”進行《https最佳安全實踐》演講分享。it大咖說作為獨家視訊合作方，經主辦方和講者審閱授權釋出。
閱讀字數: 753 用時: 3分鐘
本演講将介紹如何利用css對shiny頁面進行個性化設計及在網頁中嵌入視訊；并通過一個詳細案例介紹了利用htmlwidgets包開發html控件，基于d3.js庫建立簡單的互動桑基圖，包括控件建立、函數修改、資料調用及與shiny結合的示範。
css為html文檔提供了一種複雜外觀的樣式語言。由于shiny應用程式使用者界面（ui）是一個html文檔，可以使用css來控制shiny應用程式的外觀。
要用css美化應用程式，常用的有三種方式。
1、建立一個樣式表，把它放到www目錄檔案下：在應用的目前目錄下，建立www檔案夾，把css樣式放在www目錄裡。對shiny自帶的“03_reactivity”例子添加個性化樣式。
2、把css添加到html标題中。
3、将樣式直接添加到html控件标簽中：直接在使用者界面中的單個html元素中添加css樣式，優先級高于其他的css源。
免費的shiny沒有權限控制，如果掌握一些基本的css知識，就可以輕易地給應用添加一個登入視窗。
利用htmlwidgets包調用d3plus.js庫，生成互動式圖表。
建立一個新包，包名為myd3plus，将會生成treemap.r、treemap.ymal和treemap.js三個檔案。
将下載下傳的d3plus.zip解壓，把裡面的檔案d3.js和d3plus.js拷貝至htmlwidgets/lib目錄下。
修改treemap.ymal的檔案配置，該檔案是用來設定控件依賴的js庫。
stylesheet是用來指定特定的css格式，此處不添加。
在treemap.r中，删除message=message指令，增加data=data指令。
運作devtools::install()對myd3plus包進行安裝。
建構簡單資料框，運作treemap函數，檢視效果。
利用htmlwidgets包建立的控件，很容易與rmarkdown和shiny結合。
我的分享到此結束，謝謝大家！
相關推薦 推薦文章 <a href="https://link.juejin.im/?target=http%3a%2f%2fmp.weixin.qq.com%2fs%3f__biz%3dmzixodqxmjc0ma%3d%3d%26amp%3bmid%3d2247486678%26amp%3bidx%3d1%26amp%3bsn%3db19d0ee59319a11e9de5f1e00e46b51c%26amp%3bchksm%3d97ebaf7da09c266b149b5ccb843920403078ae3328349a9e0476c1b6bc2197174e809ef4028d%26amp%3bscene%3d21%23wechat_redirect" target="_blank">百度外賣如何做到前端開發配置化</a> <a href="https://link.juejin.im/?target=http%3a%2f%2fmp.weixin.qq.com%2fs%3f__biz%3dmzixodqxmjc0ma%3d%3d%26amp%3bmid%3d2247486616%26amp%3bidx%3d1%26amp%3bsn%3d9d759f9fd8d83e2318bef089c7da2a95%26amp%3bchksm%3d97ebaf33a09c2625c5db5670f032cf05d91b1419bffc7b90ca59121c35693659aef1f37af4dd%26amp%3bscene%3d21%23wechat_redirect" target="_blank">阿裡巴巴前端專家渚薰：h5互動的正确打開方式</a> <a href="https://link.juejin.im/?target=http%3a%2f%2fmp.weixin.qq.com%2fs%3f__biz%3dmzixodqxmjc0ma%3d%3d%26amp%3bmid%3d2247485093%26amp%3bidx%3d2%26amp%3bsn%3da877646eb7543ea601cf37501cce372b%26amp%3bchksm%3d97eba50ea09c2c18bb95ae90608ef64a719f9adea31fb3393741b2a1a72244b8adbe356bd8b0%26amp%3bscene%3d21%23wechat_redirect" target="_blank"></a> 近期活動 <a href="https://link.juejin.im/?target=http%3a%2f%2fmp.weixin.qq.com%2fs%3f__biz%3dmzixodqxmjc0ma%3d%3d%26amp%3bmid%3d2247486678%26amp%3bidx%3d3%26amp%3bsn%3d520dd4a59e48b45876f94465c419379a%26amp%3bchksm%3d97ebaf7da09c266b4b26362bbc27730bdf3b71ab1c06a9703d862187bfe55802b583731245d4%26amp%3bscene%3d21%23wechat_redirect" target="_blank">直播 | 2017紅象雲騰大資料基礎軟體v5.0釋出暨合作夥伴大會</a>