blocks|key|496702|text|Scott+Murray的教程是一个很好的起点：http://alignedleft.com/tutorials/d3/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|496703|关于环境，您可能会发现这很有用：http://tributary.io。它是一个交互式编码编辑器，旨在帮助您学习d3。|496704|entityMap|0|LINK|mutability|MUTABLE|url|http://alignedleft.com/tutorials/d3/|1|http://tributary.io/^0|O|10|0|0|G|J|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Scott Murray's tutorials are a great starting place: <a href="http://alignedleft.com/tutorials/d3/" rel="noreferrer">http://alignedleft.com/tutorials/d3/</a>

Regarding environments, you might find this useful: <a href="http://tributary.io" rel="noreferrer">http://tributary.io</a>. It's an interactive coding editor designed to help you learn d3.

blocks|key|496757|text|因为我最近发现了它，所以我也建议使用http://phrogz.net/js/d3-playground/来做一个沙箱，在其中进行试用，并了解这些组件如何协同工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|496758|entityMap|0|LINK|mutability|MUTABLE|url|http://phrogz.net/js/d3-playground/^0|I|Z|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Since I recently found it, I'd recommend working with <a href="http://phrogz.net/js/d3-playground/" rel="noreferrer">http://phrogz.net/js/d3-playground/</a> as well for a sandbox in which to trial out and learn how the pieces can work together.

blocks|key|496797|text|Scott+Murray网站是一个很好的入门http://alignedleft.com/tutorials/d3/。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|496798|一旦完成，我建议你看看这个网站http://techslides.com/over-1000-d3-js-examples-and-demos/，它列出了1000个d3的例子。您通常可以复制javascript数据和代码，并在您自己的计算机上本地处理它。|496799|你也可以试着用这些图中的一个，看看是否能重建它。|496800|我发现这很有用的原因是，您需要能够识别d3抛给您的错误。这是你不知道为什么会有一个错误的时刻，这是麻烦的。有了一个你正在重构的例子，你就可以保证你自己的代码副本可以工作，这样你就可以更容易地纠正自己。|496801|entityMap|0|LINK|mutability|MUTABLE|url|http://alignedleft.com/tutorials/d3/|1|http://techslides.com/over-1000-d3-js-examples-and-demos/^0|M|10|0|0|F|1L|1|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

Scott Murrays website is a good first start <a href="http://alignedleft.com/tutorials/d3/">http://alignedleft.com/tutorials/d3/</a>. 

Once done with that, I might recommend you take a look at this website <a href="http://techslides.com/over-1000-d3-js-examples-and-demos/">http://techslides.com/over-1000-d3-js-examples-and-demos/</a>, 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. 

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.

blocks|key|280037|text|我已经阅读了许多d3.js教程，发现它们令人困惑。当一个人还不是很熟悉HTML和CSS时，他们需要更多的细节解释。这些细节在NRecursions中呈现得更好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|280038|Part1：http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html|offset|length|280039|Part2：http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html|280040|entityMap|0|LINK|mutability|MUTABLE|url|http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html|1|http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html^0|0|6|21|0|0|6|27|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

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: <a href="http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html" rel="nofollow">http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html</a> 
Part2: <a href="http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html" rel="nofollow">http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html</a>

I want to start learning to make data visualisations (as side project in my PhD) preferably with the <code>D3.js</code> package. I do not have <code>java</code>-experience but i do have a background in OOP as i mostly work in <code>python</code>. As such, I was wondering what's the best way to learn working with d3 and which environment one could recommend me.

Learning d3.js for data visualisation

我想开始学习如何进行数据可视化(作为我的PhD中的副项目)，最好使用D3.js包。我没有java-experience，但我有OOP的背景，因为我主要在python工作。因此，我想知道学习使用d3的最好方法是什么，以及可以推荐我使用哪种环境。

问学习d3.js以实现数据可视化
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问学习d3.js以实现数据可视化EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问学习d3.js以实现数据可视化
EN