簡單的d3.js示例圖表開始

我已經瀏覽了d3.js網站上的所有圖表示例，但它太複雜了。我想要的是繪製X軸和Y軸，繪製JSON數據一樣簡單的d3.js示例圖表開始

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

伯爵在x軸和今年ÿaxis.Can任何一個提供上手一個簡單的示例。

2012-11-21 iJade

這兩個沙箱有助於理解d3 - http://phrogz.net/js/d3-playground/#VerticalBars_HTML（儘管一些示例不再有效）和http://enjalot.com - 支流。

這裏是一個條形圖根據您的數據開始：http://enjalot.com/inlet/4125640/

2012-11-21 15:59:25 PhoebeB

逸看起來很容易enough.I有一個疑問如何控制之間的差距年的酒吧。我的意思是兩年的酒吧之間的差距 – iJade

嘗試使用支流中的滑塊更改bar_width以玩弄值。這個很酷！對於更復雜的示例：http://horses.phoebebright.com/registrations.html - 代碼位於drawYears函數的shared.js中。 – PhoebeB

並以任何方式將軸值添加到x軸和y軸 – iJade

這是我與nvd3

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

這裏使用的標籤是x軸和值是Y軸

2012-11-21 14:19:54

我覺得D3和nvd3幾乎相同圖形的JavaScript庫 –

你已經採取了看看this教程？它似乎很簡單地將其分解，從基本圖表轉到更復雜的svg示例。一旦這些看起來有道理，你可以嘗試用你的JSON替換數據變量並從那裏開始。

2012-11-21 14:25:32 gotohales

回答