線上 D3JS 編輯器 - 編寫、執行和分享程式碼

<!DOCTYPE html> <head> <title> D3.js 演示示例</title> <script src="https://d3js.org/d3.v4.js"></script> </head> <body> <h1>第一個 html 文件</h1> <p>這是我的第一句話</p> <svg> <circle class="target" style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle> </svg> <script> d3.select(".target").style("stroke-width", 8) </script> </body> </html>

嘗試這個線上 D3JS 編輯器（版本 D3.js (v4)） , 直接從您的瀏覽器中編輯、執行並分享您的 D3js 程式碼。此線上編譯器為您提供了使用最新版本 D3.js (v4) 編輯和編譯 D3js 程式碼的舒適體驗。

如何使用此線上 D3JS 編輯器？

編寫和執行程式碼

直接在“原始碼”選項卡下方編寫您的程式（或將其貼上在那裡）。
如果您想儲存您的程式，請進入“專案”選單並儲存它。
您可以直接執行您的程式，而無需儲存它，只需要單擊“執行”按鈕即可。

如何輸入使用者輸入？

最新版本的線上 D3JS 編輯器允許從終端視窗在執行時提供程式輸入，就像您在自己的計算機上執行您的程式一樣。因此，只需執行一個程式並從右側提供的終端視窗中輸入您的程式輸入（如果有的話）即可。

鍵盤快捷鍵

以下是我們編輯器的關鍵詞快捷方式

快捷方式	描述
⌘ + Enter	執行程式
⌘ + S	儲存專案（需要登入）
⇧ + ⌘ + S	另存為專案
⌘ + P	新建專案
⌘ + G	分享專案
⌘ + Z	撤消編輯
⌘ + Y	恢復編輯
⌘ + A	全選文字
⌘ + X	剪下選中文字
⌘ + C	複製選中文字
⌘ + V	貼上複製的文字
⌘ + F	搜尋文字
⌘ + ⌥ + F	替換文字

快捷方式	描述
Ctrl + Enter	執行程式
Ctrl + S	儲存專案
Shift + Ctrl + S	另存為專案
Ctrl + G	分享專案
Ctrl + Z	撤消編輯
Ctrl + Y	恢復編輯
Ctrl + A	全選文字
Ctrl + X	剪下選中文字
Ctrl + C	複製選中文字
Ctrl + V	貼上複製的文字
Ctrl + F	搜尋文字
Ctrl + H	替換文字

儲存和分享專案程式碼

線上儲存 D3js 專案

您可以將您的 D3js 專案儲存到我們這裡，以便您稍後可以訪問此專案。要儲存專案，您將需要在我們這裡建立一個登入 ID。因此，在您儲存專案之前，請使用此頁面右上角提供的連結建立一個登入 ID。

線上分享 D3js 專案

你可以使用此功能與你的老師、同學和同事分享你的 D3js 程式碼。只需點選分享按鈕，它將建立一個短連結，可以透過電子郵件、WhatsApp 甚至社交媒體進行分享。如果一個分享連結已閒置近 3 個月，它將被刪除。

編輯器的更多功能

主題 – 你可以從“設定”選單的“編輯器主題”選項更改當前編輯器的主題。
字型大小 – 你可以從“設定”選單的“字型大小”選項更改編輯器/編譯器的字型大小。
製表符大小 – 你可以從“設定”選單的“製表符大小”選項更改制表符大小。
顯示/隱藏行號 – 你可以使用“設定”選單的“顯示行號”或“隱藏行號”選項顯示/隱藏程式碼行號。
等等，還有更多。

為什麼要使用線上 D3JS 編輯器？

使用線上 D3JS 編輯器來執行你的 D3js 程式碼有很多好處

平臺獨立性：你可以從任何裝置執行你的程式碼，而無需考慮作業系統。
便利：你不需要安裝任何東西就可以使用這個編輯器。
無需設定：執行你的程式碼無需額外的設定。
更新版本：我們的線上編譯器/編輯器/終端是最新版本。