Javascript 学习 d3.js 进行数据可视化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12025374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Learning d3.js for data visualisation
提问by ruben baetens
I want to start learning to make data visualisations (as side project in my PhD) preferably with the D3.jspackage. I do not have java-experience but i do have a background in OOP as i mostly work in python. As such, I was wondering what's the best way to learn working with d3 and which environment one could recommend me.
我想开始学习制作数据可视化（作为我博士的副项目）最好使用该D3.js包。我没有java经验，但我确实有 OOP 背景，因为我主要在python. 因此，我想知道什么是学习使用 d3 的最佳方式以及可以推荐我的环境。
采纳答案by heckj
Since I recently found it, I'd recommend working with http://phrogz.net/js/d3-playground/as well for a sandbox in which to trial out and learn how the pieces can work together.
由于我最近发现了它，我建议使用http://phrogz.net/js/d3-playground/以及一个沙箱，在其中试用并了解各个部分如何协同工作。
回答by Gabriel Florit
Scott Murray's tutorials are a great starting place: http://alignedleft.com/tutorials/d3/
Scott Murray 的教程是一个很好的起点：http: //alignedleft.com/tutorials/d3/
Regarding environments, you might find this useful: http://tributary.io. It's an interactive coding editor designed to help you learn d3.
关于环境，您可能会发现这很有用：http: //tributary.io。它是一个交互式编码编辑器，旨在帮助您学习 d3。
回答by cantdutchthis
Scott Murrays website is a good first start http://alignedleft.com/tutorials/d3/.
Scott Murrays 网站是一个很好的开始http://alignedleft.com/tutorials/d3/。
Once done with that, I might recommend you take a look at this website http://techslides.com/over-1000-d3-js-examples-and-demos/, it lists 1000 examples of d3. You can usually copy the javascript data and code and play around with it locally on your own computer.
完成后，我可能会建议您查看此网站http://techslides.com/over-1000-d3-js-examples-and-demos/，它列出了 1000 个 d3 示例。您通常可以复制 javascript 数据和代码并在您自己的计算机上本地使用它。
You can also try to take one of these plots and see if you can reconstruct it.
您也可以尝试采用这些图之一，看看是否可以重建它。
The reason why I found this to be useful is that you need to be able to recognize the errors that d3 throws at you. It's the moments that you have no idea why there is an error that are troublesome. By having an example that you are reconstructing you guarantee yourself of a copy of code that works such you might be able to more easily correct yourself.
我发现这很有用的原因是您需要能够识别 d3 向您抛出的错误。那些你不知道为什么会出现错误的时刻才是麻烦的。通过有一个您正在重建的示例，您可以保证自己有一份有效的代码副本，这样您就可以更轻松地纠正自己。
回答by Phuoc Do
I've written a few tutorials for beginners to learn both Javascript and data visualization:
我为初学者编写了一些教程来学习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/
http://blog.vida.io/2014/06/23/coding-visualization-tutorial-1-variables/ http://blog.vida.io/2014/06/23/coding-visualization-tutorial-2-职能/
I find the first four tutorials from wiki very useful to learn D3 fundamentals:
我发现 wiki 的前四个教程对于学习D3 基础非常有用：
https://github.com/mbostock/d3/wiki/Tutorials
https://github.com/mbostock/d3/wiki/Tutorials
Introduction, Three Little Circles, Thinking with Joins, How Selections Work.
介绍、三个小圆圈、连接思考、选择如何工作。
My team runs https://vida.io. We use template approach to d3 and allow user to quickly create working document, upload new data, and bind data to document through GUI editor. Check out examples to get started:
我的团队运行https://vida.io。我们对d3使用模板方法，允许用户通过GUI编辑器快速创建工作文档，上传新数据，并将数据绑定到文档。查看示例以开始使用：
回答by Will
Here's a list of resources that I'm using to learn d3js. The official site can be a bit overwhelming for someone new to web development so here's a few more:
这是我用来学习 d3js 的资源列表。对于 Web 开发新手来说，官方网站可能有点让人不知所措，所以这里还有一些：
Tutorials
教程
- Official D3js website has a list of good examples and tutorials here
- Square has a great quick intro to D3 when they onboard here
- Christophe Viau has a good one page intro here
- Jerome Cukier's "Hello World" in D3, which goes into more detail of setting up your environment available here
- Scott Murray (alignedleft) explains things very well. He's also the author of 'Interactive Data Visualization', which I highly recommend. Tutorial here
- 官方 D3js 网站在这里有一个很好的例子和教程列表
- 当他们在这里上船时，Square 对 D3 有一个很好的快速介绍
- Christophe Viau 有一个很好的一页介绍在这里
- Jerome Cukier 在 D3 中的“Hello World”，其中详细介绍了如何在此处设置您的环境
- Scott Murray（左对齐）很好地解释了事情。他还是我强烈推荐的“交互式数据可视化”的作者。教程在这里
Reference
参考
- You're going to see a lot of different d3 functions and wonder what they do. Use the official API here.
- 您将看到许多不同的 d3 函数并想知道它们的作用。在此处使用官方 API 。
回答by Nav
I've been through many of the d3.js tutorials and found them to be confusing. When a person is not yet very familiar with HTML and CSS, they need a bit more explanation of the details. Those details are better presented in NRecursions:
Part1: http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html
Part2: http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html
我浏览了许多 d3.js 教程，发现它们令人困惑。当一个人还不是很熟悉 HTML 和 CSS 时，他们需要对细节进行更多的解释。这些细节在NRecursions更好的呈现：
第1部分：http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html
第2部分：http://nrecursions.blogspot.in/2014/12 /getting-your-head-around-d3js-part2.html
