学习用于数据可视化的 d3.js [关闭]

Posted 2023-02-22

【中文标题】学习用于数据可视化的 d3.js [关闭]

【英文标题】：Learning d3.js for data visualisation [closed]

【发布时间】：2012-08-15 01:23:35

【问题描述】：

我想开始学习使用D3.js 包进行数据可视化（作为我博士期间的副项目）。我没有java-experience，但我确实有面向对象编程的背景，因为我主要在python 工作。因此，我想知道学习使用 d3 的最佳方法是什么，以及可以向我推荐哪种环境。

【问题讨论】：

学习D3.js可以从官方documentations and examples开始。至于IDE，有很多，选择一个让你舒服的就行了。我使用NetBeans 进行开发，使用Notepad++ 进行快速编辑。附： Java与javascript无关。

正如@Adnan 指出的那样，Java 和 Javascript 并不相同。

请将问题移至programmers.stackexchange.com - 虽然它与 D3 相关，但实际上并不是您想要解决的某个错误/功能，而是关于如何处理 D3... 在这种情况下始终建议移至programmers.stackexchange.com

我发现this site 很有用。除了商业上的偏差和拖沓之外，对于有重点的新手来说，它是一个很好的形式。

是的，请将 Java 更改为 JavaScript。这就像比较火腿和仓鼠。

【参考方案1】：

Scott Murray 的教程是一个很好的起点：http://alignedleft.com/tutorials/d3/

关于环境，您可能会发现这很有用：http://tributary.io。这是一个交互式编码编辑器，旨在帮助您学习 d3。

【讨论】：

我无法让该网站正常工作。我确定这是因为您一开始就假设您将使用 SVG ...？我不知道...但我花了 30-45 分钟迷路了...我正试图将头绕在 D3 周围并盲目地跌跌撞撞...

@randomblink 很遗憾听到这个消息。这个网站alignedleft.com/tutorials/d3 没有为您加载吗？我绝对鼓励你试一试，Scott 的材料很棒。

Scott 的网站很棒。我可以（几乎）围绕着他所写的内容。但我正在尝试创建时间表。而且我找不到任何直接的时间线 D3 教程。一切都想在时间线上使用 X 和 Y。我想在特定事件的时间线上添加一个点，但我找不到示例。我已经购买了一些教程视频、书籍等。也许我需要从我的时间线思考中退后一步，熟悉“其他”D3 概念，然后回到时间……我不知道。感谢 cmets。

【参考方案2】：

我浏览了许多 d3.js 教程，发现它们令人困惑。当一个人对 html 和 CSS 还不是很熟悉时，他们需要对细节进行更多的解释。这些细节在 NRecursions 中得到了更好的呈现： 第 1 部分：http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html 第二部分：http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html

【参考方案3】：

这是我用来学习 d3js 的资源列表。对于 Web 开发的新手来说，官方网站可能有点让人不知所措，所以这里还有一些：

教程

D3js 官网有很好的例子和教程列表here Square 在加入 here 时对 D3 有一个很棒的快速介绍 Christophe Viau 有一个很好的一页介绍here Jerome Cukier 在 D3 中的“Hello World”，其中详细介绍了设置您的环境可用here Scott Murray（左对齐）很好地解释了事情。他也是我强烈推荐的“交互式数据可视化”的作者。教程here

参考

您将看到许多不同的 d3 函数，并想知道它们的作用。使用官方 API here。

【参考方案4】：

我为初学者编写了一些教程来学习 Javascript 和数据可视化：

http://blog.vida.io/2014/06/23/coding-visualization-tutorial-1-variables/http://blog.vida.io/2014/06/23/coding-visualization-tutorial-2-functions/

我发现 wiki 的前四个教程对于学习 D3 基础知识非常有用：

https://github.com/mbostock/d3/wiki/Tutorials

简介、三个小圆圈、连接思考、选择的工作原理。

我的团队运行https://vida.io。我们对 d3 使用模板方法，允许用户通过 GUI 编辑器快速创建工作文档、上传新数据以及将数据绑定到文档。查看示例以开始使用：

https://vida.io/explore

【参考方案5】：

Scott Murrays 网站是一个很好的开始http://alignedleft.com/tutorials/d3/。

完成此操作后，我可能会建议您查看此网站http://techslides.com/over-1000-d3-js-examples-and-demos/，它列出了 1000 个 d3 示例。您通常可以复制 javascript 数据和代码并在您自己的计算机上本地使用它。

您也可以尝试获取这些地块之一，看看是否可以重建它。

我发现这很有用的原因是您需要能够识别 d3 向您抛出的错误。正是那些你不知道为什么会出现错误的时候才是麻烦的。通过有一个您正在重构的示例，您可以保证自己拥有一份有效的代码副本，这样您就可以更轻松地纠正自己。

【参考方案6】：

由于我最近发现了它，我建议使用 http://phrogz.net/js/d3-playground/ 以及一个沙盒，在其中试用并了解各个部分如何协同工作。