简单的d3.js样例图表入门

Question

我浏览了d3.js网站上的所有图表示例，但它们太复杂了，难以理解。 我想要的只是绘制x轴和y轴，并绘制一个json数据，例如：

{count:100,year:1999}
{count:240,year:2010}
{count:290,year:2009}

在x轴上计数，在y轴上标记年份。有人可以提供一个简单的样例来开始吗？

- iJade

Answer 1

这两个沙盒对于理解d3很有帮助 - http://phrogz.net/js/d3-playground/#VerticalBars_HTML （尽管一些示例不再有效）和http://enjalot.com - Tributary。

这是一个基于您的数据开始制作的条形图：http://enjalot.com/inlet/4125640/

- PhoebeB

---

这看起来非常简单。我有一个疑问，如何控制年份条之间的间隔。我的意思是两个特定年份的条之间的间隔。 - iJade

尝试使用Tributary中的滑块更改bar_width以玩弄值。这很酷！对于一个更复杂的例子：http://horses.phoebebright.com/registrations.html - 代码在drawYears函数的shared.js中。 - PhoebeB

有没有办法将坐标轴值添加到x轴和y轴？ - iJade

尝试使用此教程了解如何应用轴：http://alignedleft.com/tutorials/d3/axes/ - PhoebeB

Answer 2

这是我在使用nvd3时所用的

  [{values: 
              [{"value":3,"label":"17 hr"},
               {"value":2,"label":"18 hr"},
               {"value":1,"label":"19 hr"}]
    }];

这里的标签是x轴，值是y轴

- Shamis Shukoor

---

我认为d3和nvd3几乎是相同的图形JavaScript库。 - Shamis Shukoor

Answer 3

你看过this的教程吗？它似乎将其简单地分解，从基本图表到更复杂的SVG示例。一旦这些看起来有意义，你可以尝试用你的JSON替换data变量，然后继续。

- gotohales