可視化貓的偏好
發佈於2024-11-08
瀏覽：899
偶然看到一篇文章，名字叫《為什麼貓…？ 》，分析了貓咪的一些喜好和行為。裡面的視覺設計非常吸引我。其特點是採用手繪風格和氣泡式佈局。此外，可愛的字體也令人賞心悅目。我非常喜歡貓。我有一隻貓，名叫瓜瓜（意思是可愛又愚蠢）。同樣，我也是前端開發人員。我開發了一個名為 AntV G6 的圖形視覺化框架。因此，我以為我可以透過這個框架實現類似的設計，事實證明我做到了！
G6基於名為G的渲染引擎，它提供了一個插件，可以將形狀轉換為類似手繪的風格（本質上基於roughjs）。
此外，我使用了 d3-hierarchy 提供的套件佈局。由於G6的註冊機制，可以非常方便地存取各種第三方函式庫。
完整的範例可以在《為什麼貓這樣做？ 》中看到。
如果您喜歡，歡迎給我的專案一顆星。這對我來說很重要
版本聲明
本文轉載於：https://dev.to/iaaron/visualize-the-preferences-of-cats-14al?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
解決MySQL插入Emoji時出現的\\"字符串值錯誤\\"異常Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...程式設計 發佈於2025-05-17 -
找到最大計數時，如何解決mySQL中的“組函數\”錯誤的“無效使用”？如何在mySQL中使用mySql 檢索最大計數，您可能會遇到一個問題，您可能會在嘗試使用以下命令：理解錯誤正確找到由名稱列分組的值的最大計數，請使用以下修改後的查詢： 計數（*）為c 來自EMP1 按名稱組 c desc訂購 限制1 查詢說明 select語句提取名稱列和每個名稱...程式設計 發佈於2025-05-17
-
如何在鼠標單擊時編程選擇DIV中的所有文本？在鼠標上選擇div文本單擊帶有文本內容，用戶如何使用單個鼠標單擊單擊div中的整個文本？這允許用戶輕鬆拖放所選的文本或直接複製它。 在單個鼠標上單擊的div元素中選擇文本，您可以使用以下Javascript函數： function selecttext（canduterid）{ if（d...程式設計 發佈於2025-05-17
-
如何使用Regex在PHP中有效地提取括號內的文本php：在括號內提取文本在處理括號內的文本時，找到最有效的解決方案是必不可少的。一種方法是利用PHP的字符串操作函數，如下所示： 作為替代 $ text ='忽略除此之外的一切（text）'; preg_match（'＃（（。 &&& [Regex使用模式來搜索特...程式設計 發佈於2025-05-17
-
如何在Java的全屏獨家模式下處理用戶輸入？Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...程式設計 發佈於2025-05-17
-
Python讀取CSV文件UnicodeDecodeError終極解決方法在試圖使用已內置的CSV模塊讀取Python中時，CSV文件中的Unicode Decode Decode Decode Decode decode Error讀取，您可能會遇到錯誤的錯誤：無法解碼字節 在位置2-3中：截斷\ uxxxxxxxx逃脫當CSV文件包含特殊字符或Unicode的路徑逃...程式設計 發佈於2025-05-17
-
如何克服PHP的功能重新定義限制？克服PHP的函數重新定義限制在PHP中，多次定義一個相同名稱的函數是一個no-no。嘗試這樣做，如提供的代碼段所示，將導致可怕的“不能重新列出”錯誤。 但是，PHP工具腰帶中有一個隱藏的寶石：runkit擴展。它使您能夠靈活地重新定義函數。 runkit_function_renction_...程式設計 發佈於2025-05-17
-
如何檢查對像是否具有Python中的特定屬性？方法來確定對象屬性存在尋求一種方法來驗證對像中特定屬性的存在。考慮以下示例，其中嘗試訪問不確定屬性會引起錯誤： >>> a = someClass（） >>> A.property Trackback（最近的最新電話）： 文件“ ”，第1行， attributeError：SomeClass實...程式設計 發佈於2025-05-17
-
Python高效去除文本中HTML標籤方法在Python中剝離HTML標籤，以獲取原始的文本表示 僅通過Python的MlStripper 來簡化剝離過程，Python Standard庫提供了一個專門的功能，MLSTREPERE，MLSTREPERIPLE，MLSTREPERE，MLSTREPERIPE，MLSTREPERCE，MLST...程式設計 發佈於2025-05-17
-
Java數組中元素位置查找技巧在Java數組中檢索元素的位置 利用Java的反射API將數組轉換為列表中，允許您使用indexof方法。 （primitives）（鏈接到Mishax的解決方案） 用於排序陣列的數組此方法此方法返回元素的索引，如果發現了元素的索引，或一個負值，指示應放置元素的插入點。程式設計 發佈於2025-05-17
-
如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行？postgresql：為每個唯一標識符在postgresql中提取最後一行，您可能需要遇到與數據集合中每個不同標識的信息相關的信息。考慮以下數據：[ 1 2014-02-01 kjkj 在數據集中的每個唯一ID中檢索最後一行的信息，您可以在操作員上使用Postgres的有效效率： id dat...程式設計 發佈於2025-05-17
-
查找當前執行JavaScript的腳本元素方法如何引用當前執行腳本的腳本元素在某些方案中理解問題在某些方案中，開發人員可能需要將其他腳本動態加載其他腳本。但是，如果Head Element尚未完全渲染，則使用document.getElementsbytagname（'head'）[0] .appendChild（v）的常規方...程式設計 發佈於2025-05-17
-
您可以使用CSS在Chrome和Firefox中染色控制台輸出嗎？在javascript console 中顯示顏色是可以使用chrome的控制台顯示彩色文本，例如紅色的redors，for for for for錯誤消息？ 回答是的，可以使用CSS將顏色添加到Chrome和Firefox中的控制台顯示的消息（版本31或更高版本）中。要實現這一目標，請使用以下...程式設計 發佈於2025-05-17
-
將圖片浮動到底部右側並環繞文字的技巧在Web設計中圍繞在Web設計中，有時可以將圖像浮動到頁面右下角，從而使文本圍繞它纏繞。這可以在有效地展示圖像的同時創建一個吸引人的視覺效果。 css位置在右下角，使用css float and clear properties： img { 浮點：對； ...程式設計 發佈於2025-05-17
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
