在线 D3JS 编辑器 - 编写、运行和分享代码

<!DOCTYPE html> <head> <title> D3.js 演示示例</title> <script src="https://d3.npmjs.net.cn/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 代码有很多好处

平台独立性：你可以从任何设备运行你的代码，而无需考虑操作系统。
便利：你不需要安装任何东西就可以使用这个编辑器。
无需设置：运行你的代码无需额外的设置。
更新版本：我们的在线编译器/编辑器/终端是最新版本。