javascript - 简单的 d3.js 示例图表开始

Question

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

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

在 x 轴上计数，在 y 轴上计数。任何人都可以提供一个简单的示例来开始。

Answer 1

这两个沙箱有助于理解 d3 - http://phrogz.net/js/d3-playground/#VerticalBars_HTML（尽管有些示例不再适用）和http://enjalot.com - Tributary。

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

Answer 2

这就是我与 nvd3 一起使用的

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

这里 label 是 x 轴， value 是 y 轴

Answer 3

你看过这个教程吗？从基本图表到更复杂的 svg 示例，它似乎相当简单地分解它。一旦这些似乎有意义，您可以尝试用您的 JSON替换数据变量并从那里开始。